publish: Blog in Progress #1

This commit is contained in:
murtezayesil 2020-08-16 02:36:26 +06:00
parent 641a413c9e
commit b2cba2ab5a
82 changed files with 2213 additions and 360 deletions

View File

@ -0,0 +1,23 @@
title: Blog in Progress #1
date: 2020-12-31 12:00
tags: 100DaysToOffload
summary: Removed Google Fonts dependency to load the page faster and discovered an issue where MP4 viewer won't load video.
status: published
comment:
hundreddaystooffload: 19
<div style="text-align: center;">
<img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF">
</div>
I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So [here is a reference screenshot](images/screenshots/index_full_page_screenshot_w760.webp "Old index page") before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.
If you want to know how well does this page performed in GTmetrix with old theme, [here is the report](extra/gtmetrix_murtezayesil.me_2020_08_16.pdf) in PDF.
# Removing Google Font dependency
[Yanone's Kaffeesatz font](https://www.yanone.de/fonts/kaffeesatz/) is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.
Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.
Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️

View File

@ -0,0 +1,8 @@
title: Digital Cleansing - YouTube
date: 2020-12-31 12:00
tags: 100DaysToOffload
summary:
status: draft
comment:
hundreddaystooffload:

View File

@ -0,0 +1,8 @@
title: RSS
date: 2020-08-15 15:23
tags: 100DaysToOffload
summary:
status: draft
comment:
hundreddaystooffload:

Binary file not shown.

View File

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -51,6 +51,8 @@
<h1>Archives for Ali Murteza Yesil</h1>
<dl>
<dt>Thu 31 December 2020</dt>
<dd><a href="https://murtezayesil.me/blog-in-progress-1.html">Blog in Progress #1</a></dd>
<dt>Thu 13 August 2020</dt>
<dd><a href="https://murtezayesil.me/resizing-2500-photos.html">Resizing 2500 photos</a></dd>
<dt>Tue 11 August 2020</dt>

View File

@ -50,106 +50,43 @@
<aside id="featured" class="body">
<article>
<h1 class="entry-title"><a href="https://murtezayesil.me/resizing-2500-photos.html">Resizing 2500 photos</a></h1>
<h1 class="entry-title"><a href="https://murtezayesil.me/blog-in-progress-1.html">Blog in Progress #1</a></h1>
<footer class="post-info">
<span>Thu 31 December 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>19</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><div style="text-align: center;">
<img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF">
</div>
<p>I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So <a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page">here is a reference screenshot</a> before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.</p>
<p>If you want to know how well does this page performed in GTmetrix with old theme, <a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf">here is the report</a> in PDF.</p>
<h1>Removing Google Font dependency</h1>
<p><a href="https://www.yanone.de/fonts/kaffeesatz/">Yanone's Kaffeesatz font</a> is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.</p>
<p>Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.</p>
<p>Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️</p> </article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/resizing-2500-photos.html" rel="bookmark"
title="Permalink to Resizing 2500 photos">Resizing 2500 photos</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Thu 13 August 2020</span>
<span>| in <a href="https://murtezayesil.me/category/tech.html">Tech</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/code.html">code</a><a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>18</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><p>I was asked to write a program to resize thousands of images which were gonna be uploaded to a website. Images had to be the same height for them to look organized in gallery. I remembered how I used <a href="https://imagemagick.org/">imagemagick</a> to write <a href="https://gitlab.com/murtezayesil/student/-/tree/master/sh/desktop-clock" title="use imagemagick, figlet and feh for tty-clock on wallpaper">desktop-clock</a>, immitate tty-clock on wallpaper. That experience helped me to design the program in my mind as we continue to speak on the phone.</p>
<div class="highlight"><pre><span></span><code>/‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾<span class="se">\ </span>
<span class="p">|</span> <span class="k">for</span> each image <span class="p">|</span>
<span class="p">|</span> <span class="k">do</span> resize to <span class="nv">height</span><span class="o">=</span><span class="m">800</span> <span class="p">|</span>
<span class="se">\_</span>__________________________/
O
o <span class="se">\_\_</span> _/_/
. <span class="se">\_</span>_/
<span class="o">(</span>oo<span class="o">)</span><span class="se">\_</span>______
<span class="o">(</span>__<span class="o">)</span><span class="se">\ </span> <span class="o">)</span><span class="se">\/\</span>
<span class="o">||</span>----w <span class="p">|</span>
<span class="o">||</span> <span class="o">||</span>
</code></pre></div>
<h1>This is a learning opportunity</h1>
<p>Since I don't have much of an experience on shell scripting, I was <a href="https://start.duckduckgo.com/" title="DuckDuckGo">Duck</a>ing everything. I learned to do few things during this task.</p>
<ol>
<li><a href="https://duckduckgo.com/?q=for+loop+shell+script" title="There are many tutorials">For loops in shell script</a></li>
<li>Getting <a href="https://stackoverflow.com/questions/2437452/how-to-get-the-list-of-files-in-a-directory-in-a-shell-script" title="I didn't know how to use asteriks 😅️">list of files</a></li>
<li>Correct syntax for <a href="https://imagemagick.org/script/convert.php" title="It ain't magick but it quiet is 😉️">resizing with ImageMagick</a></li>
</ol>
<p>After reading tutorials and looking at examples everything felt as simple as lego. I just needed to put them together. </p>
<p>Here is <code>image_shrinker.v0.1_alpha.sh</code> :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale 1000000x800 ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This version has problems which I can't call "feature" 😁️ :</p>
<ol>
<li>Resolution is hard coded. Btw, only way to define resolution is in WIDTHxHEIGHT format AFAIK.</li>
<li>Script must be in same directory as images</li>
<li>PWD must point to the directory where script is</li>
</ol>
<h2>Adjustable resolution</h2>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$WIDTHx$HEIGHT</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This fixes the hard coded resolution problem but new problem is that the user has to know that WIDTH and HEIGHT must be given. I fix that by showing correct syntax to the user and then exiting :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
<span class="k">if</span> <span class="o">[</span> <span class="nv">$#</span> -lt <span class="m">2</span> <span class="o">]</span>
<span class="k">then</span>
<span class="nb">echo</span> <span class="s2">&quot;USAGE:&quot;</span>
<span class="nb">echo</span> -e <span class="s2">&quot;\t\$IMAGE_DIRECTORY/image_shrinker.sh WIDTH HEIGHT&quot;</span>
<span class="nb">exit</span> <span class="m">1</span>
<span class="k">fi</span>
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
mkdir ../output
<span class="k">for</span> image in *
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$Resolution</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>Here is some other attempt to make code a bit more flexible in terms of where images can be and where output can go. Actually no but that is what I was going for 😜️</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
<span class="nv">DIR</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span>
<span class="k">for</span> image in ./*.*
<span class="k">do</span>
<span class="c1"># Below code will scale images to 800px height without breaking aspect ratio</span>
convert <span class="nv">$DIR</span>/<span class="nv">$image</span> -scale 10000x800 -write <span class="nv">$DIR</span>/../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>It is hard to ask for help (especially after torturing with my code) but if you would like to give me feedback and advice, reply to toot of this post.</p><!-- Comments -->
<hr>
<h2>Comments</h2>
<p>Toot on <a href="https://fosstodon.org/@murtezayesil/104681372709677657">this thread</a> to comment. This blog is a static site. Comments won't appear here.</p>
</article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>
@ -276,22 +213,6 @@ mkdir ../output
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>10</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/deleting-amazon-account.html" rel="bookmark"
title="Permalink to Deleting Amazon account">Deleting Amazon account</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Sun 26 July 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>9</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
</ol><!-- /#posts-list -->

View File

@ -50,6 +50,22 @@
<section id="content" class="body">
<ol id="posts-list" class="hfeed" start="9">
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/deleting-amazon-account.html" rel="bookmark"
title="Permalink to Deleting Amazon account">Deleting Amazon account</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Sun 26 July 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>9</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/digital-cleansing-mastodon.html" rel="bookmark"

View File

@ -49,7 +49,7 @@
</header><!-- /#banner -->
<section id="content" class="body">
<h1>Authors on Ali Murteza Yesil</h1> <li><a href="https://murtezayesil.me/author/ali-murteza-yesil.html">Ali Murteza Yesil</a> (18)</li>
<h1>Authors on Ali Murteza Yesil</h1> <li><a href="https://murtezayesil.me/author/ali-murteza-yesil.html">Ali Murteza Yesil</a> (19)</li>
</section>
<section id="extras" class="body">

View File

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blog in Progress #1</title>
<link rel="stylesheet" href="https://murtezayesil.me/theme/css/main.css" />
<link href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Ali Murteza Yesil Atom Feed" />
<link href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate" title="Ali Murteza Yesil RSS Feed" />
<!-- This border added via BLACK_LIVES_MATTER toggle in site settings -->
<style>
body {
border-width: 5em ;
border-color: #000000 ;
border-style: none solid solid solid ; /* top border : none, right bottom left : solid */
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="index" class="home">
<!-- This banner added via BLACK_LIVES_MATTER toggle in site settings -->
<div style="background-color: black; padding: 1em; margin-bottom: .8em">
<h1 style="text-align: center; margin-bottom: 0em"><a href="https://blacklivesmatter.com/" style="color: #fce21b; font-size: 2em">Black Lives Matter</a></h1>
</div>
<header id="banner" class="body">
<h1><a href="https://murtezayesil.me/">Ali Murteza Yesil <strong>Blog</strong></a></h1>
<nav><ul>
<li><a href="https://murtezayesil.me/pages/about.html">About</a></li>
<li><a href="https://murtezayesil.me/pages/contact.html">Contact</a></li>
</ul>
<form id="search" action"#" onsubmit="javascript:window.open('https://duckduckgo.com/?q='+document.getElementById('keywords').value+'+site:https://murtezayesil.me');">
<input id="keywords" type="text" />
</form>
</nav>
<div id="submenu">
<ul>
<li class="active"><a href="https://murtezayesil.me/category/notes.html">Notes</a></li>
<li><a href="https://murtezayesil.me/category/personal.html">Personal</a></li>
<li><a href="https://murtezayesil.me/category/tech.html">Tech</a></li>
</ul>
<div>
</header><!-- /#banner -->
<section id="content" class="body">
<article>
<header>
<h1 class="entry-title">
<a href="https://murtezayesil.me/blog-in-progress-1.html" rel="bookmark"
title="Permalink to Blog in Progress #1">Blog in Progress #1</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Thu 31 December 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>19</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> <div style="text-align: center;">
<img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF">
</div>
<p>I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So <a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page">here is a reference screenshot</a> before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.</p>
<p>If you want to know how well does this page performed in GTmetrix with old theme, <a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf">here is the report</a> in PDF.</p>
<h1>Removing Google Font dependency</h1>
<p><a href="https://www.yanone.de/fonts/kaffeesatz/">Yanone's Kaffeesatz font</a> is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.</p>
<p>Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.</p>
<p>Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️</p>
</div><!-- /.entry-content -->
<!-- #100DaysToOffload message -->
<p>Day <strong>19</strong> of <a href="https://100daystooffload.com/" title="click to read about the challenge">#100DaysToOffload</a></p>
</article>
</section>
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="https://kevq.uk">Kev Quirk</a></li>
<li><a href="https://mikestone.me">Mike Stone</a></li>
<li><a href="https://yarmo.eu/">Yarmo Mackenbach</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate">atom feed</a></li>
<li><a href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate">rss feed</a></li>
<li><a href="https://fosstodon.org/@murtezayesil" rel="me">Fostodon</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<p>Powered by <a href="http://getpelican.com/">Pelican</a>. Theme <a href="https://github.com/blueicefield/pelican-blueidea/">blueidea</a>, inspired by the default theme.</p>
</footer><!-- /#contentinfo -->
<!-- IndieWeb Profile -->
<!-- ToDo : Make IndieWeb Profile auto generating according to site preferences -->
<!-- This profile is created by following https://kevq.uk/how-to-create-an-indieweb-profile/ blog post. Thanks to Kev Quirk -->
<section style="display: none;" class="h-card">
<!-- About me -->
<span class="p-name">Ali Murteza Yesil</span>
<span class="p-note">I'm a student, privacy advocate and SysAdmin wannabe. I was born in Turkey but I live abroad.</span>
<!-- Profile picture -->
<img class="u-photo" src="https://murtezayesil.me/images/avatar_polygon_1.png"/>
<!-- My location -->
<!-- <span class="p-locality">City, Country or Country</span> -->
<!-- Links -->
<a class="u-url u-uid" href="https://murtezayesil.me"></a>
<!-- Mail Template <a class="u-email" rel="me" href="mailto:USERNAME@SERVICEPROVIDER"></a> -->
<a class="u-url" rel="me" href="https://fosstodon.org/@murtezayesil"></a>
<!-- Twitter Example <a class="u-url" rel="me" href="https://twitter.com/USERNAME"></a> -->
<!-- Template <a class="u-url" rel="me" href="https://URL"></a> -->
<!-- Categories -->
<span class="p-category">Blogging</span>
<span class="p-category">Open Source Software</span>
<span class="p-category">Privacy</span>
</section>
</body>
</html>

View File

@ -49,7 +49,7 @@
</header><!-- /#banner -->
<h1>Categories on Ali Murteza Yesil</h1>
<ul>
<li><a href="https://murtezayesil.me/category/notes.html">Notes</a> (3)</li>
<li><a href="https://murtezayesil.me/category/notes.html">Notes</a> (4)</li>
<li><a href="https://murtezayesil.me/category/personal.html">Personal</a> (5)</li>
<li><a href="https://murtezayesil.me/category/tech.html">Tech</a> (10)</li>
</ul>

View File

@ -50,34 +50,43 @@
<aside id="featured" class="body">
<article>
<h1 class="entry-title"><a href="https://murtezayesil.me/deleting-amazon-account.html">Deleting Amazon account</a></h1>
<h1 class="entry-title"><a href="https://murtezayesil.me/blog-in-progress-1.html">Blog in Progress #1</a></h1>
<footer class="post-info">
<span>Thu 31 December 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>19</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><div style="text-align: center;">
<img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF">
</div>
<p>I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So <a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page">here is a reference screenshot</a> before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.</p>
<p>If you want to know how well does this page performed in GTmetrix with old theme, <a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf">here is the report</a> in PDF.</p>
<h1>Removing Google Font dependency</h1>
<p><a href="https://www.yanone.de/fonts/kaffeesatz/">Yanone's Kaffeesatz font</a> is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.</p>
<p>Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.</p>
<p>Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️</p> </article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/deleting-amazon-account.html" rel="bookmark"
title="Permalink to Deleting Amazon account">Deleting Amazon account</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Sun 26 July 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>9</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><p>I call it "deleting account", Amazon calls it "closing account". I used them interchangibly in this post.</p>
<p>If you set your mind to delete (or close) your account, don't let too many steps discourage you. I understand that some people run their businesses on AWS and deleting their Amazon account will also delete AWS servers connected to that account. Amazon has given me 2 warnings about it and accepted to delete my account anyway. I wasn't invested in Amazon ecosystem and never used AWS anyway.</p>
<p>According my experience, here are the steps you may need to go through:</p>
<ol>
<li>Click on <a href="https://www.amazon.com/gp/help/customer/display.html" title="Currently this page">Help</a> in the page footer and search for "close account".</li>
<li>You will be presented with an article that warns you about Amazon services you will lose access to. Read and make sure you stopped using those services already.</li>
<li>There is "<strong>Note:</strong> To close your account, please <a href="https://www.amazon.com/hz/contact-us/request-data">Contact Us</a> to request that your account be closed." at the very end of the help page. Click on "Contact Us" to continue.</li>
<li>If not yet logged in you will be asked to, login. Choose email for communication. There is also an option to call but I don't know how would that go since I don't live in US or Canada.</li>
<li>They will send the same help article with a bit more information and links to make sure you stopped using everything such as AWS, Alexa, Kindle Publishing, Prime video, Amazon Music etc. Near the end of email you will see "If you still want to close your Amazon.com account after reviewing the items above, please click this link and state that you want to close your account: <em>Some Link</em>", click on the link.</li>
<li>It will open a page with a text box. Write why you want to close your account and submit. If you are not sure what to write and also feeling adventurous, you can copy paste this link : https://www.youtube.com/watch?v=dQw4w9WgXcQ</li>
<li>They will email you within 24 hours either for more instructions or to tell you that your account is closed.</li>
</ol>
<p><strong>Note</strong>: Depending on where you live or how many Amazon services you used, you may need to go through more steps.</p><!-- Comments -->
<hr>
<h2>Comments</h2>
<p>Toot on <a href="https://fosstodon.org/@murtezayesil/104581385751399042">this thread</a> to comment. This blog is a static site. Comments won't appear here.</p>
</article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>

View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Digital Cleansing - YouTube</title>
<link rel="stylesheet" href="https://murtezayesil.me/theme/css/main.css" />
<link href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Ali Murteza Yesil Atom Feed" />
<link href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate" title="Ali Murteza Yesil RSS Feed" />
<!-- This border added via BLACK_LIVES_MATTER toggle in site settings -->
<style>
body {
border-width: 5em ;
border-color: #000000 ;
border-style: none solid solid solid ; /* top border : none, right bottom left : solid */
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="index" class="home">
<!-- This banner added via BLACK_LIVES_MATTER toggle in site settings -->
<div style="background-color: black; padding: 1em; margin-bottom: .8em">
<h1 style="text-align: center; margin-bottom: 0em"><a href="https://blacklivesmatter.com/" style="color: #fce21b; font-size: 2em">Black Lives Matter</a></h1>
</div>
<header id="banner" class="body">
<h1><a href="https://murtezayesil.me/">Ali Murteza Yesil <strong>Blog</strong></a></h1>
<nav><ul>
<li><a href="https://murtezayesil.me/pages/about.html">About</a></li>
<li><a href="https://murtezayesil.me/pages/contact.html">Contact</a></li>
</ul>
<form id="search" action"#" onsubmit="javascript:window.open('https://duckduckgo.com/?q='+document.getElementById('keywords').value+'+site:https://murtezayesil.me');">
<input id="keywords" type="text" />
</form>
</nav>
<div id="submenu">
<ul>
<li><a href="https://murtezayesil.me/category/notes.html">Notes</a></li>
<li><a href="https://murtezayesil.me/category/personal.html">Personal</a></li>
<li><a href="https://murtezayesil.me/category/tech.html">Tech</a></li>
</ul>
<div>
</header><!-- /#banner -->
<section id="content" class="body">
<article>
<header>
<h1 class="entry-title">
<a href="https://murtezayesil.me/drafts/digital-cleansing-youtube.html" rel="bookmark"
title="Permalink to Digital Cleansing - YouTube">Digital Cleansing - YouTube</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Thu 31 December 2020</span>
<span>| in <a href="https://murtezayesil.me/category/draft.html">draft</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span>
</footer><!-- /.post-info -->
</div><!-- /.entry-content -->
</article>
</section>
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="https://kevq.uk">Kev Quirk</a></li>
<li><a href="https://mikestone.me">Mike Stone</a></li>
<li><a href="https://yarmo.eu/">Yarmo Mackenbach</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate">atom feed</a></li>
<li><a href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate">rss feed</a></li>
<li><a href="https://fosstodon.org/@murtezayesil" rel="me">Fostodon</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<p>Powered by <a href="http://getpelican.com/">Pelican</a>. Theme <a href="https://github.com/blueicefield/pelican-blueidea/">blueidea</a>, inspired by the default theme.</p>
</footer><!-- /#contentinfo -->
<!-- IndieWeb Profile -->
<!-- ToDo : Make IndieWeb Profile auto generating according to site preferences -->
<!-- This profile is created by following https://kevq.uk/how-to-create-an-indieweb-profile/ blog post. Thanks to Kev Quirk -->
<section style="display: none;" class="h-card">
<!-- About me -->
<span class="p-name">Ali Murteza Yesil</span>
<span class="p-note">I'm a student, privacy advocate and SysAdmin wannabe. I was born in Turkey but I live abroad.</span>
<!-- Profile picture -->
<img class="u-photo" src="https://murtezayesil.me/images/avatar_polygon_1.png"/>
<!-- My location -->
<!-- <span class="p-locality">City, Country or Country</span> -->
<!-- Links -->
<a class="u-url u-uid" href="https://murtezayesil.me"></a>
<!-- Mail Template <a class="u-email" rel="me" href="mailto:USERNAME@SERVICEPROVIDER"></a> -->
<a class="u-url" rel="me" href="https://fosstodon.org/@murtezayesil"></a>
<!-- Twitter Example <a class="u-url" rel="me" href="https://twitter.com/USERNAME"></a> -->
<!-- Template <a class="u-url" rel="me" href="https://URL"></a> -->
<!-- Categories -->
<span class="p-category">Blogging</span>
<span class="p-category">Open Source Software</span>
<span class="p-category">Privacy</span>
</section>
</body>
</html>

127
output/drafts/rss.html Normal file
View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>RSS</title>
<link rel="stylesheet" href="https://murtezayesil.me/theme/css/main.css" />
<link href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate" title="Ali Murteza Yesil Atom Feed" />
<link href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate" title="Ali Murteza Yesil RSS Feed" />
<!-- This border added via BLACK_LIVES_MATTER toggle in site settings -->
<style>
body {
border-width: 5em ;
border-color: #000000 ;
border-style: none solid solid solid ; /* top border : none, right bottom left : solid */
}
</style>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body id="index" class="home">
<!-- This banner added via BLACK_LIVES_MATTER toggle in site settings -->
<div style="background-color: black; padding: 1em; margin-bottom: .8em">
<h1 style="text-align: center; margin-bottom: 0em"><a href="https://blacklivesmatter.com/" style="color: #fce21b; font-size: 2em">Black Lives Matter</a></h1>
</div>
<header id="banner" class="body">
<h1><a href="https://murtezayesil.me/">Ali Murteza Yesil <strong>Blog</strong></a></h1>
<nav><ul>
<li><a href="https://murtezayesil.me/pages/about.html">About</a></li>
<li><a href="https://murtezayesil.me/pages/contact.html">Contact</a></li>
</ul>
<form id="search" action"#" onsubmit="javascript:window.open('https://duckduckgo.com/?q='+document.getElementById('keywords').value+'+site:https://murtezayesil.me');">
<input id="keywords" type="text" />
</form>
</nav>
<div id="submenu">
<ul>
<li><a href="https://murtezayesil.me/category/notes.html">Notes</a></li>
<li><a href="https://murtezayesil.me/category/personal.html">Personal</a></li>
<li><a href="https://murtezayesil.me/category/tech.html">Tech</a></li>
</ul>
<div>
</header><!-- /#banner -->
<section id="content" class="body">
<article>
<header>
<h1 class="entry-title">
<a href="https://murtezayesil.me/drafts/rss.html" rel="bookmark"
title="Permalink to RSS">RSS</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Sat 15 August 2020</span>
<span>| in <a href="https://murtezayesil.me/category/draft.html">draft</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span>
</footer><!-- /.post-info -->
</div><!-- /.entry-content -->
</article>
</section>
<section id="extras" class="body">
<div class="blogroll">
<h2>blogroll</h2>
<ul>
<li><a href="https://kevq.uk">Kev Quirk</a></li>
<li><a href="https://mikestone.me">Mike Stone</a></li>
<li><a href="https://yarmo.eu/">Yarmo Mackenbach</a></li>
</ul>
</div><!-- /.blogroll -->
<div class="social">
<h2>social</h2>
<ul>
<li><a href="https://murtezayesil.me/feeds/atom.xml" type="application/atom+xml" rel="alternate">atom feed</a></li>
<li><a href="https://murtezayesil.me/feeds/rss.xml" type="application/rss+xml" rel="alternate">rss feed</a></li>
<li><a href="https://fosstodon.org/@murtezayesil" rel="me">Fostodon</a></li>
</ul>
</div><!-- /.social -->
</section><!-- /#extras -->
<footer id="contentinfo" class="body">
<p>Powered by <a href="http://getpelican.com/">Pelican</a>. Theme <a href="https://github.com/blueicefield/pelican-blueidea/">blueidea</a>, inspired by the default theme.</p>
</footer><!-- /#contentinfo -->
<!-- IndieWeb Profile -->
<!-- ToDo : Make IndieWeb Profile auto generating according to site preferences -->
<!-- This profile is created by following https://kevq.uk/how-to-create-an-indieweb-profile/ blog post. Thanks to Kev Quirk -->
<section style="display: none;" class="h-card">
<!-- About me -->
<span class="p-name">Ali Murteza Yesil</span>
<span class="p-note">I'm a student, privacy advocate and SysAdmin wannabe. I was born in Turkey but I live abroad.</span>
<!-- Profile picture -->
<img class="u-photo" src="https://murtezayesil.me/images/avatar_polygon_1.png"/>
<!-- My location -->
<!-- <span class="p-locality">City, Country or Country</span> -->
<!-- Links -->
<a class="u-url u-uid" href="https://murtezayesil.me"></a>
<!-- Mail Template <a class="u-email" rel="me" href="mailto:USERNAME@SERVICEPROVIDER"></a> -->
<a class="u-url" rel="me" href="https://fosstodon.org/@murtezayesil"></a>
<!-- Twitter Example <a class="u-url" rel="me" href="https://twitter.com/USERNAME"></a> -->
<!-- Template <a class="u-url" rel="me" href="https://URL"></a> -->
<!-- Categories -->
<span class="p-category">Blogging</span>
<span class="p-category">Open Source Software</span>
<span class="p-category">Privacy</span>
</section>
</body>
</html>

Binary file not shown.

View File

@ -1,5 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>Ali Murteza Yesil</title><link href="https://murtezayesil.me/" rel="alternate"></link><link href="https://murtezayesil.me/feeds/atom.xml" rel="self"></link><id>https://murtezayesil.me/</id><updated>2020-08-13T07:19:00+06:00</updated><subtitle>Blog</subtitle><entry><title>Resizing 2500 photos</title><link href="https://murtezayesil.me/resizing-2500-photos.html" rel="alternate"></link><published>2020-08-13T07:19:00+06:00</published><updated>2020-08-13T07:19:00+06:00</updated><author><name>Ali Murteza Yesil</name></author><id>tag:murtezayesil.me,2020-08-13:/resizing-2500-photos.html</id><summary type="html">&lt;p&gt;We needed to resize 2500 photographs for a website. There is a shell script for that.&lt;/p&gt;</summary><content type="html">&lt;p&gt;I was asked to write a program to resize thousands of images which were gonna be uploaded to a website. Images had to be the same height for them to look organized in gallery. I remembered how I used &lt;a href="https://imagemagick.org/"&gt;imagemagick&lt;/a&gt; to write &lt;a href="https://gitlab.com/murtezayesil/student/-/tree/master/sh/desktop-clock" title="use imagemagick, figlet and feh for tty-clock on wallpaper"&gt;desktop-clock&lt;/a&gt;, immitate tty-clock on wallpaper. That experience helped me to design the program in my mind as we continue to speak on the phone.&lt;/p&gt;
<feed xmlns="http://www.w3.org/2005/Atom"><title>Ali Murteza Yesil</title><link href="https://murtezayesil.me/" rel="alternate"></link><link href="https://murtezayesil.me/feeds/atom.xml" rel="self"></link><id>https://murtezayesil.me/</id><updated>2020-12-31T12:00:00+06:00</updated><subtitle>Blog</subtitle><entry><title>Blog in Progress #1</title><link href="https://murtezayesil.me/blog-in-progress-1.html" rel="alternate"></link><published>2020-12-31T12:00:00+06:00</published><updated>2020-12-31T12:00:00+06:00</updated><author><name>Ali Murteza Yesil</name></author><id>tag:murtezayesil.me,2020-12-31:/blog-in-progress-1.html</id><summary type="html">&lt;p&gt;Removed Google Fonts dependency to load the page faster and discovered an issue where MP4 viewer won't load video.&lt;/p&gt;</summary><content type="html">&lt;div style="text-align: center;"&gt;
&lt;img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF"&gt;
&lt;/div&gt;
&lt;p&gt;I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So &lt;a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page"&gt;here is a reference screenshot&lt;/a&gt; before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.&lt;/p&gt;
&lt;p&gt;If you want to know how well does this page performed in GTmetrix with old theme, &lt;a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf"&gt;here is the report&lt;/a&gt; in PDF.&lt;/p&gt;
&lt;h1&gt;Removing Google Font dependency&lt;/h1&gt;
&lt;p&gt;&lt;a href="https://www.yanone.de/fonts/kaffeesatz/"&gt;Yanone's Kaffeesatz font&lt;/a&gt; is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.&lt;/p&gt;
&lt;p&gt;Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.&lt;/p&gt;
&lt;p&gt;Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️&lt;/p&gt;</content><category term="Notes"></category><category term="100DaysToOffload"></category></entry><entry><title>Resizing 2500 photos</title><link href="https://murtezayesil.me/resizing-2500-photos.html" rel="alternate"></link><published>2020-08-13T07:19:00+06:00</published><updated>2020-08-13T07:19:00+06:00</updated><author><name>Ali Murteza Yesil</name></author><id>tag:murtezayesil.me,2020-08-13:/resizing-2500-photos.html</id><summary type="html">&lt;p&gt;We needed to resize 2500 photographs for a website. There is a shell script for that.&lt;/p&gt;</summary><content type="html">&lt;p&gt;I was asked to write a program to resize thousands of images which were gonna be uploaded to a website. Images had to be the same height for them to look organized in gallery. I remembered how I used &lt;a href="https://imagemagick.org/"&gt;imagemagick&lt;/a&gt; to write &lt;a href="https://gitlab.com/murtezayesil/student/-/tree/master/sh/desktop-clock" title="use imagemagick, figlet and feh for tty-clock on wallpaper"&gt;desktop-clock&lt;/a&gt;, immitate tty-clock on wallpaper. That experience helped me to design the program in my mind as we continue to speak on the phone.&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre&gt;&lt;span&gt;&lt;/span&gt;&lt;code&gt;/‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾&lt;span class="se"&gt;\ &lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; each image &lt;span class="p"&gt;|&lt;/span&gt;
&lt;span class="p"&gt;|&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; resize to &lt;span class="nv"&gt;height&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="m"&gt;800&lt;/span&gt; &lt;span class="p"&gt;|&lt;/span&gt;

View File

@ -1,5 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"><title>Ali Murteza Yesil - Notes</title><link href="https://murtezayesil.me/" rel="alternate"></link><link href="https://murtezayesil.me/feeds/notes.atom.xml" rel="self"></link><id>https://murtezayesil.me/</id><updated>2020-07-26T21:15:00+06:00</updated><subtitle>Blog</subtitle><entry><title>Deleting Amazon account</title><link href="https://murtezayesil.me/deleting-amazon-account.html" rel="alternate"></link><published>2020-07-26T21:15:00+06:00</published><updated>2020-07-26T21:15:00+06:00</updated><author><name>Ali Murteza Yesil</name></author><id>tag:murtezayesil.me,2020-07-26:/deleting-amazon-account.html</id><summary type="html">&lt;p&gt;Deleting Amazon account has more steps (friction) than I would like. But not impossible.&lt;/p&gt;</summary><content type="html">&lt;p&gt;I call it "deleting account", Amazon calls it "closing account". I used them interchangibly in this post.&lt;/p&gt;
<feed xmlns="http://www.w3.org/2005/Atom"><title>Ali Murteza Yesil - Notes</title><link href="https://murtezayesil.me/" rel="alternate"></link><link href="https://murtezayesil.me/feeds/notes.atom.xml" rel="self"></link><id>https://murtezayesil.me/</id><updated>2020-12-31T12:00:00+06:00</updated><subtitle>Blog</subtitle><entry><title>Blog in Progress #1</title><link href="https://murtezayesil.me/blog-in-progress-1.html" rel="alternate"></link><published>2020-12-31T12:00:00+06:00</published><updated>2020-12-31T12:00:00+06:00</updated><author><name>Ali Murteza Yesil</name></author><id>tag:murtezayesil.me,2020-12-31:/blog-in-progress-1.html</id><summary type="html">&lt;p&gt;Removed Google Fonts dependency to load the page faster and discovered an issue where MP4 viewer won't load video.&lt;/p&gt;</summary><content type="html">&lt;div style="text-align: center;"&gt;
&lt;img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF"&gt;
&lt;/div&gt;
&lt;p&gt;I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So &lt;a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page"&gt;here is a reference screenshot&lt;/a&gt; before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.&lt;/p&gt;
&lt;p&gt;If you want to know how well does this page performed in GTmetrix with old theme, &lt;a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf"&gt;here is the report&lt;/a&gt; in PDF.&lt;/p&gt;
&lt;h1&gt;Removing Google Font dependency&lt;/h1&gt;
&lt;p&gt;&lt;a href="https://www.yanone.de/fonts/kaffeesatz/"&gt;Yanone's Kaffeesatz font&lt;/a&gt; is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.&lt;/p&gt;
&lt;p&gt;Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.&lt;/p&gt;
&lt;p&gt;Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️&lt;/p&gt;</content><category term="Notes"></category><category term="100DaysToOffload"></category></entry><entry><title>Deleting Amazon account</title><link href="https://murtezayesil.me/deleting-amazon-account.html" rel="alternate"></link><published>2020-07-26T21:15:00+06:00</published><updated>2020-07-26T21:15:00+06:00</updated><author><name>Ali Murteza Yesil</name></author><id>tag:murtezayesil.me,2020-07-26:/deleting-amazon-account.html</id><summary type="html">&lt;p&gt;Deleting Amazon account has more steps (friction) than I would like. But not impossible.&lt;/p&gt;</summary><content type="html">&lt;p&gt;I call it "deleting account", Amazon calls it "closing account". I used them interchangibly in this post.&lt;/p&gt;
&lt;p&gt;If you set your mind to delete (or close) your account, don't let too many steps discourage you. I understand that some people run their businesses on AWS and deleting their Amazon account will also delete AWS servers connected to that account. Amazon has given me 2 warnings about it and accepted to delete my account anyway. I wasn't invested in Amazon ecosystem and never used AWS anyway.&lt;/p&gt;
&lt;p&gt;According my experience, here are the steps you may need to go through:&lt;/p&gt;
&lt;ol&gt;

File diff suppressed because one or more lines are too long

View File

Before

Width:  |  Height:  |  Size: 176 KiB

After

Width:  |  Height:  |  Size: 176 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 170 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 104 KiB

View File

@ -50,106 +50,43 @@
<aside id="featured" class="body">
<article>
<h1 class="entry-title"><a href="https://murtezayesil.me/resizing-2500-photos.html">Resizing 2500 photos</a></h1>
<h1 class="entry-title"><a href="https://murtezayesil.me/blog-in-progress-1.html">Blog in Progress #1</a></h1>
<footer class="post-info">
<span>Thu 31 December 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>19</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><div style="text-align: center;">
<img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF">
</div>
<p>I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So <a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page">here is a reference screenshot</a> before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.</p>
<p>If you want to know how well does this page performed in GTmetrix with old theme, <a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf">here is the report</a> in PDF.</p>
<h1>Removing Google Font dependency</h1>
<p><a href="https://www.yanone.de/fonts/kaffeesatz/">Yanone's Kaffeesatz font</a> is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.</p>
<p>Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.</p>
<p>Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️</p> </article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/resizing-2500-photos.html" rel="bookmark"
title="Permalink to Resizing 2500 photos">Resizing 2500 photos</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Thu 13 August 2020</span>
<span>| in <a href="https://murtezayesil.me/category/tech.html">Tech</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/code.html">code</a><a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>18</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><p>I was asked to write a program to resize thousands of images which were gonna be uploaded to a website. Images had to be the same height for them to look organized in gallery. I remembered how I used <a href="https://imagemagick.org/">imagemagick</a> to write <a href="https://gitlab.com/murtezayesil/student/-/tree/master/sh/desktop-clock" title="use imagemagick, figlet and feh for tty-clock on wallpaper">desktop-clock</a>, immitate tty-clock on wallpaper. That experience helped me to design the program in my mind as we continue to speak on the phone.</p>
<div class="highlight"><pre><span></span><code>/‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾<span class="se">\ </span>
<span class="p">|</span> <span class="k">for</span> each image <span class="p">|</span>
<span class="p">|</span> <span class="k">do</span> resize to <span class="nv">height</span><span class="o">=</span><span class="m">800</span> <span class="p">|</span>
<span class="se">\_</span>__________________________/
O
o <span class="se">\_\_</span> _/_/
. <span class="se">\_</span>_/
<span class="o">(</span>oo<span class="o">)</span><span class="se">\_</span>______
<span class="o">(</span>__<span class="o">)</span><span class="se">\ </span> <span class="o">)</span><span class="se">\/\</span>
<span class="o">||</span>----w <span class="p">|</span>
<span class="o">||</span> <span class="o">||</span>
</code></pre></div>
<h1>This is a learning opportunity</h1>
<p>Since I don't have much of an experience on shell scripting, I was <a href="https://start.duckduckgo.com/" title="DuckDuckGo">Duck</a>ing everything. I learned to do few things during this task.</p>
<ol>
<li><a href="https://duckduckgo.com/?q=for+loop+shell+script" title="There are many tutorials">For loops in shell script</a></li>
<li>Getting <a href="https://stackoverflow.com/questions/2437452/how-to-get-the-list-of-files-in-a-directory-in-a-shell-script" title="I didn't know how to use asteriks 😅️">list of files</a></li>
<li>Correct syntax for <a href="https://imagemagick.org/script/convert.php" title="It ain't magick but it quiet is 😉️">resizing with ImageMagick</a></li>
</ol>
<p>After reading tutorials and looking at examples everything felt as simple as lego. I just needed to put them together. </p>
<p>Here is <code>image_shrinker.v0.1_alpha.sh</code> :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale 1000000x800 ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This version has problems which I can't call "feature" 😁️ :</p>
<ol>
<li>Resolution is hard coded. Btw, only way to define resolution is in WIDTHxHEIGHT format AFAIK.</li>
<li>Script must be in same directory as images</li>
<li>PWD must point to the directory where script is</li>
</ol>
<h2>Adjustable resolution</h2>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$WIDTHx$HEIGHT</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This fixes the hard coded resolution problem but new problem is that the user has to know that WIDTH and HEIGHT must be given. I fix that by showing correct syntax to the user and then exiting :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
<span class="k">if</span> <span class="o">[</span> <span class="nv">$#</span> -lt <span class="m">2</span> <span class="o">]</span>
<span class="k">then</span>
<span class="nb">echo</span> <span class="s2">&quot;USAGE:&quot;</span>
<span class="nb">echo</span> -e <span class="s2">&quot;\t\$IMAGE_DIRECTORY/image_shrinker.sh WIDTH HEIGHT&quot;</span>
<span class="nb">exit</span> <span class="m">1</span>
<span class="k">fi</span>
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
mkdir ../output
<span class="k">for</span> image in *
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$Resolution</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>Here is some other attempt to make code a bit more flexible in terms of where images can be and where output can go. Actually no but that is what I was going for 😜️</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
<span class="nv">DIR</span><span class="o">=</span><span class="sb">`</span><span class="nb">pwd</span><span class="sb">`</span>
<span class="k">for</span> image in ./*.*
<span class="k">do</span>
<span class="c1"># Below code will scale images to 800px height without breaking aspect ratio</span>
convert <span class="nv">$DIR</span>/<span class="nv">$image</span> -scale 10000x800 -write <span class="nv">$DIR</span>/../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>It is hard to ask for help (especially after torturing with my code) but if you would like to give me feedback and advice, reply to toot of this post.</p><!-- Comments -->
<hr>
<h2>Comments</h2>
<p>Toot on <a href="https://fosstodon.org/@murtezayesil/104681372709677657">this thread</a> to comment. This blog is a static site. Comments won't appear here.</p>
</article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>
@ -276,22 +213,6 @@ mkdir ../output
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>10</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/deleting-amazon-account.html" rel="bookmark"
title="Permalink to Deleting Amazon account">Deleting Amazon account</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Sun 26 July 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>9</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
</ol><!-- /#posts-list -->

View File

@ -50,6 +50,22 @@
<section id="content" class="body">
<ol id="posts-list" class="hfeed" start="9">
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/deleting-amazon-account.html" rel="bookmark"
title="Permalink to Deleting Amazon account">Deleting Amazon account</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Sun 26 July 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>9</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --> </div><!-- /.entry-content -->
</article></li>
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/digital-cleansing-mastodon.html" rel="bookmark"

View File

@ -50,106 +50,43 @@
<aside id="featured" class="body">
<article>
<h1 class="entry-title"><a href="https://murtezayesil.me/resizing-2500-photos.html">Resizing 2500 photos</a></h1>
<h1 class="entry-title"><a href="https://murtezayesil.me/blog-in-progress-1.html">Blog in Progress #1</a></h1>
<footer class="post-info">
<span>Thu 31 December 2020</span>
<span>| in <a href="https://murtezayesil.me/category/notes.html">Notes</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>19</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><div style="text-align: center;">
<img src="images/gifs/construction_progress_bar.gif" alt="Under Construction GIF">
</div>
<p>I am redesigning this blog's theme piece by piece. But there is a possibility that you will be reading this article after the new theme is applied. So <a href="images/screenshots/index_full_page_screenshot_w760.webp" title="Old index page">here is a reference screenshot</a> before new theme is applied. Theme isn't the only change. I have few more changes in mind to extend blog's features and optimize it even further.</p>
<p>If you want to know how well does this page performed in GTmetrix with old theme, <a href="extra/gtmetrix_murtezayesil.me_2020_08_16.pdf">here is the report</a> in PDF.</p>
<h1>Removing Google Font dependency</h1>
<p><a href="https://www.yanone.de/fonts/kaffeesatz/">Yanone's Kaffeesatz font</a> is beautiful, but it takes almost 300ms to load. Even though it is as small as 20KB, it is something that is not needed.</p>
<p>Another reason I want to remove it is that, it is embedded through Google Fonts which also loads some Google API code. It would be ironic to not respect my readers while I am going through digital cleansing and de-Googling myself.</p>
<p>Fun Fact: My IndieWeb profile image is 1024 by 1024 PNG and is 174 KB, around 9 times the Yanone's Kaffesatz font from Google Fonts, but still takes a third less time to download. That being said, it isn't displayed anywhere and shouldn't be loaded unless explicitly wanted. 128x128 would be fine too. 1024x1024 is an overkill for an image that isn't displayed 😬️</p> </article>
</aside><!-- /#featured -->
<section id="content" class="body">
<h1>Other articles</h1>
<ol id="posts-list" class="hfeed">
<li><article class="hentry">
<header>
<h1><a href="https://murtezayesil.me/resizing-2500-photos.html" rel="bookmark"
title="Permalink to Resizing 2500 photos">Resizing 2500 photos</a></h1>
</header>
<div class="entry-content">
<footer class="post-info">
<span>Thu 13 August 2020</span>
<span>| in <a href="https://murtezayesil.me/category/tech.html">Tech</a></span>
<span>| tags: <a href="https://murtezayesil.me/tag/code.html">code</a><a href="https://murtezayesil.me/tag/100daystooffload.html">100DaysToOffload</a></span> <span>| Day <strong>18</strong> of #100DaysToOffload</span>
</footer><!-- /.post-info --><p>I was asked to write a program to resize thousands of images which were gonna be uploaded to a website. Images had to be the same height for them to look organized in gallery. I remembered how I used <a href="https://imagemagick.org/">imagemagick</a> to write <a href="https://gitlab.com/murtezayesil/student/-/tree/master/sh/desktop-clock" title="use imagemagick, figlet and feh for tty-clock on wallpaper">desktop-clock</a>, immitate tty-clock on wallpaper. That experience helped me to design the program in my mind as we continue to speak on the phone.</p>
<div class="highlight"><pre><span></span><code>/‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾<span class="se">\ </span>
<span class="p">|</span> <span class="k">for</span> each image <span class="p">|</span>
<span class="p">|</span> <span class="k">do</span> resize to <span class="nv">height</span><span class="o">=</span><span class="m">800</span> <span class="p">|</span>
<span class="se">\_</span>__________________________/
O
o <span class="se">\_\_</span> _/_/
. <span class="se">\_</span>_/
<span class="o">(</span>oo<span class="o">)</span><span class="se">\_</span>______
<span class="o">(</span>__<span class="o">)</span><span class="se">\ </span> <span class="o">)</span><span class="se">\/\</span>
<span class="o">||</span>----w <span class="p">|</span>
<span class="o">||</span> <span class="o">||</span>
</code></pre></div>
<h1>This is a learning opportunity</h1>
<p>Since I don't have much of an experience on shell scripting, I was <a href="https://start.duckduckgo.com/" title="DuckDuckGo">Duck</a>ing everything. I learned to do few things during this task.</p>
<ol>
<li><a href="https://duckduckgo.com/?q=for+loop+shell+script" title="There are many tutorials">For loops in shell script</a></li>
<li>Getting <a href="https://stackoverflow.com/questions/2437452/how-to-get-the-list-of-files-in-a-directory-in-a-shell-script" title="I didn't know how to use asteriks 😅️">list of files</a></li>
<li>Correct syntax for <a href="https://imagemagick.org/script/convert.php" title="It ain't magick but it quiet is 😉️">resizing with ImageMagick</a></li>
</ol>
<p>After reading tutorials and looking at examples everything felt as simple as lego. I just needed to put them together. </p>
<p>Here is <code>image_shrinker.v0.1_alpha.sh</code> :</p>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale 1000000x800 ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>
<p>This version has problems which I can't call "feature" 😁️ :</p>
<ol>
<li>Resolution is hard coded. Btw, only way to define resolution is in WIDTHxHEIGHT format AFAIK.</li>
<li>Script must be in same directory as images</li>
<li>PWD must point to the directory where script is</li>
</ol>
<h2>Adjustable resolution</h2>
<div class="highlight"><pre><span></span><code><span class="ch">#!/bin/sh</span>
mkdir ../output
<span class="nv">WIDTH</span><span class="o">=</span><span class="nv">$1</span> <span class="p">;</span> <span class="nv">HEIGHT</span><span class="o">=</span><span class="nv">$2</span>
<span class="k">for</span> image in ./*
<span class="k">do</span>
convert <span class="nv">$image</span> -scale <span class="nv">$WIDTHx$HEIGHT</span> ../output/<span class="nv">$image</span>
<span class="k">done</span>
</code></pre></div>