Added dithered images

45 files changed, 48 insertions, 24 deletions

diff --git a/Makefile b/Makefile
index d93812a..eade890 100644
--- a/Makefile
+++ b/Makefile
@@ -16,6 +16,7 @@ dev:
         alternator --watch
 
 build:
+        bash dither-images.sh
         mkdir -p public
         openring -l 165 -n 4 -p 1 \
                 -s https://cronokirby.com/posts/index.xml \
diff --git a/assets/dna-sequence/chart-encoding-speed.png.dith.gif b/assets/dna-sequence/chart-encoding-speed.png.dith.gif
new file mode 100644
index 0000000..97cfaa9
--- /dev/null
+++ b/assets/dna-sequence/chart-encoding-speed.png.dith.gif
diff --git a/assets/dna-sequence/chart-file-sizes.png.dith.gif b/assets/dna-sequence/chart-file-sizes.png.dith.gif
new file mode 100644
index 0000000..4074890
--- /dev/null
+++ b/assets/dna-sequence/chart-file-sizes.png.dith.gif
diff --git a/assets/dna-sequence/dna-basics.jpg.dith.gif b/assets/dna-sequence/dna-basics.jpg.dith.gif
new file mode 100644
index 0000000..b33745f
--- /dev/null
+++ b/assets/dna-sequence/dna-basics.jpg.dith.gif
diff --git a/assets/dna-sequence/quote.png.dith.gif b/assets/dna-sequence/quote.png.dith.gif
new file mode 100644
index 0000000..11ead55
--- /dev/null
+++ b/assets/dna-sequence/quote.png.dith.gif
diff --git a/assets/dna-sequence/sample-binary-file.png.dith.gif b/assets/dna-sequence/sample-binary-file.png.dith.gif
new file mode 100644
index 0000000..8d35c68
--- /dev/null
+++ b/assets/dna-sequence/sample-binary-file.png.dith.gif
diff --git a/assets/dna-sequence/sample.png.dith.gif b/assets/dna-sequence/sample.png.dith.gif
new file mode 100644
index 0000000..269b77d
--- /dev/null
+++ b/assets/dna-sequence/sample.png.dith.gif
diff --git a/assets/do-fuse/fuse-droplets.png.dith.gif b/assets/do-fuse/fuse-droplets.png.dith.gif
new file mode 100644
index 0000000..62d8ba2
--- /dev/null
+++ b/assets/do-fuse/fuse-droplets.png.dith.gif
diff --git a/assets/do-fuse/fuse-spaces.png.dith.gif b/assets/do-fuse/fuse-spaces.png.dith.gif
new file mode 100644
index 0000000..1f7786e
--- /dev/null
+++ b/assets/do-fuse/fuse-spaces.png.dith.gif
diff --git a/assets/dropbox-sync/dropbox-spaces.png.dith.gif b/assets/dropbox-sync/dropbox-spaces.png.dith.gif
new file mode 100644
index 0000000..2fb9245
--- /dev/null
+++ b/assets/dropbox-sync/dropbox-spaces.png.dith.gif
diff --git a/assets/esp8366-micropython/boards.jpg.dith.gif b/assets/esp8366-micropython/boards.jpg.dith.gif
new file mode 100644
index 0000000..36f67ef
--- /dev/null
+++ b/assets/esp8366-micropython/boards.jpg.dith.gif
diff --git a/assets/general/favicon.png.dith.gif b/assets/general/favicon.png.dith.gif
new file mode 100644
index 0000000..740f1b7
--- /dev/null
+++ b/assets/general/favicon.png.dith.gif
diff --git a/assets/goaccess/goaccess-dash-html.png.dith.gif b/assets/goaccess/goaccess-dash-html.png.dith.gif
new file mode 100644
index 0000000..ea6a26a
--- /dev/null
+++ b/assets/goaccess/goaccess-dash-html.png.dith.gif
diff --git a/assets/goaccess/goaccess-dash-term.png.dith.gif b/assets/goaccess/goaccess-dash-term.png.dith.gif
new file mode 100644
index 0000000..bc26010
--- /dev/null
+++ b/assets/goaccess/goaccess-dash-term.png.dith.gif
diff --git a/assets/iot-application/iot-app-output.png.dith.gif b/assets/iot-application/iot-app-output.png.dith.gif
new file mode 100644
index 0000000..02b3762
--- /dev/null
+++ b/assets/iot-application/iot-app-output.png.dith.gif
diff --git a/assets/iot-application/iot-rest-example.png.dith.gif b/assets/iot-application/iot-rest-example.png.dith.gif
new file mode 100644
index 0000000..cb1d122
--- /dev/null
+++ b/assets/iot-application/iot-rest-example.png.dith.gif
diff --git a/assets/iot-application/iot-sqlite-db.png.dith.gif b/assets/iot-application/iot-sqlite-db.png.dith.gif
new file mode 100644
index 0000000..4c272f1
--- /dev/null
+++ b/assets/iot-application/iot-sqlite-db.png.dith.gif
diff --git a/assets/iot-application/kcachegrind.png.dith.gif b/assets/iot-application/kcachegrind.png.dith.gif
new file mode 100644
index 0000000..50d6473
--- /dev/null
+++ b/assets/iot-application/kcachegrind.png.dith.gif
diff --git a/assets/iot-application/profiling-viewer.png.dith.gif b/assets/iot-application/profiling-viewer.png.dith.gif
new file mode 100644
index 0000000..0023947
--- /dev/null
+++ b/assets/iot-application/profiling-viewer.png.dith.gif
diff --git a/assets/iot-application/snakeviz.png.dith.gif b/assets/iot-application/snakeviz.png.dith.gif
new file mode 100644
index 0000000..7e25d0f
--- /dev/null
+++ b/assets/iot-application/snakeviz.png.dith.gif
diff --git a/assets/profile-bind-error/error.jpg.dith.gif b/assets/profile-bind-error/error.jpg.dith.gif
new file mode 100644
index 0000000..4cc36e5
--- /dev/null
+++ b/assets/profile-bind-error/error.jpg.dith.gif
diff --git a/assets/python-profiling/kcachegrind.png.dith.gif b/assets/python-profiling/kcachegrind.png.dith.gif
new file mode 100644
index 0000000..50d6473
--- /dev/null
+++ b/assets/python-profiling/kcachegrind.png.dith.gif
diff --git a/assets/python-profiling/profiling-viewer.png.dith.gif b/assets/python-profiling/profiling-viewer.png.dith.gif
new file mode 100644
index 0000000..0023947
--- /dev/null
+++ b/assets/python-profiling/profiling-viewer.png.dith.gif
diff --git a/assets/python-profiling/snakeviz.png.dith.gif b/assets/python-profiling/snakeviz.png.dith.gif
new file mode 100644
index 0000000..7e25d0f
--- /dev/null
+++ b/assets/python-profiling/snakeviz.png.dith.gif
diff --git a/assets/sentiment-analysis/guardian-sa-title-desc-relationship.png.dith.gif b/assets/sentiment-analysis/guardian-sa-title-desc-relationship.png.dith.gif
new file mode 100644
index 0000000..cb7644c
--- /dev/null
+++ b/assets/sentiment-analysis/guardian-sa-title-desc-relationship.png.dith.gif
diff --git a/assets/simple-pubsub-server/caniuse.png.dith.gif b/assets/simple-pubsub-server/caniuse.png.dith.gif
new file mode 100644
index 0000000..204c156
--- /dev/null
+++ b/assets/simple-pubsub-server/caniuse.png.dith.gif
diff --git a/assets/simple-pubsub-server/chrome-debugging.png.dith.gif b/assets/simple-pubsub-server/chrome-debugging.png.dith.gif
new file mode 100644
index 0000000..898a6d0
--- /dev/null
+++ b/assets/simple-pubsub-server/chrome-debugging.png.dith.gif
diff --git a/assets/simple-pubsub-server/pubsub-overview.png.dith.gif b/assets/simple-pubsub-server/pubsub-overview.png.dith.gif
new file mode 100644
index 0000000..c642d96
--- /dev/null
+++ b/assets/simple-pubsub-server/pubsub-overview.png.dith.gif
diff --git a/assets/world-clock/hardware.jpg.dith.gif b/assets/world-clock/hardware.jpg.dith.gif
new file mode 100644
index 0000000..bcbb428
--- /dev/null
+++ b/assets/world-clock/hardware.jpg.dith.gif
diff --git a/assets/world-clock/world-clock.jpg.dith.gif b/assets/world-clock/world-clock.jpg.dith.gif
new file mode 100644
index 0000000..69cec9d
--- /dev/null
+++ b/assets/world-clock/world-clock.jpg.dith.gif
diff --git a/dither-images.sh b/dither-images.sh
new file mode 100644
index 0000000..8852ce5
--- /dev/null
+++ b/dither-images.sh
@@ -0,0 +1,6 @@
+cd assets/
+find . -type f \( -name "*.png" -o -name "*.jpg" \) | while read fname; do
+  echo "$fname"
+  convert "$fname" -type Grayscale -ordered-dither 2x2 "$fname.dith.gif"
+done
+
diff --git a/posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md b/posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md
index f2d4190..9a0540b 100644
--- a/posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md
+++ b/posts/2017-04-21-profiling-python-web-applications-with-visual-tools.md
@@ -18,7 +18,7 @@ Before we begin there are some requirements. We will need to:
 
 If you are using MacOS you should check out [Profiling Viewer](http://www.profilingviewer.com/) or [MacCallGrind](http://www.maccallgrind.com/).
 
-![KCachegrind](/assets/python-profiling/kcachegrind.png)
+![KCachegrind](/assets/python-profiling/kcachegrind.png.dith.gif)
 
 We will be dividing this post into two main categories:
 
@@ -137,7 +137,7 @@ $ pyprof2calltree -i awesome_random_number.prof
 
 This file can be opened with visualizing tools listed above. In this case we will be using Profilling Viewer under MacOS. You can open image in new tab. As you can see from this example there is hierarchy of execution order  of your code.
 
-![Profilling Viewer](/assets/python-profiling/profiling-viewer.png)
+![Profilling Viewer](/assets/python-profiling/profiling-viewer.png.dith.gif)
 
 > Make sure you  convert output of the cProfile output every time you want to refresh and take a look at your possible optimizations because cProfile updates .prof  file every time browser hits the function.
 
@@ -160,7 +160,7 @@ $ snakeviz awesome_random_number.prof
 # shows visualized profile
 ```
 
-![SnakeViz](/assets/python-profiling/snakeviz.png)
+![SnakeViz](/assets/python-profiling/snakeviz.png.dith.gif)
 
 Reddit user [ccharles](https://www.reddit.com/user/ccharles) suggested a better way for installing pip software by targeting user level instead of using sudo.
 
diff --git a/posts/2017-08-11-simple-iot-application.md b/posts/2017-08-11-simple-iot-application.md
index 0c90f43..ff8cf9d 100644
--- a/posts/2017-08-11-simple-iot-application.md
+++ b/posts/2017-08-11-simple-iot-application.md
@@ -150,11 +150,11 @@ To run this simply go to folder containing python file and run ```python webapp.
 
 After testing the service with Restlet Client you should be able to view your data in a database file ```data.db```.
 
-![REST settings example](/assets/iot-application/iot-rest-example.png)
+![REST settings example](/assets/iot-application/iot-rest-example.png.dith.gif)
 
 You can also check the contents of new database file by using desktop client for SQLite → [DB Browser for SQLite](http://sqlitebrowser.org/).
 
-![SQLite database example](/assets/iot-application/iot-sqlite-db.png)
+![SQLite database example](/assets/iot-application/iot-sqlite-db.png.dith.gif)
 
 Table structure is as simple as it can be. We have ts (timestamp) and value (value from Arduino). As you can see timestamp is generated on API side. If you would happen to have atomic clock on Arduino it would be then better to generate and send timestamp with the value. This would be particularity useful if we would be collecting sensor data at a higher frequency and then sending this data in bulk to API.
 
@@ -471,7 +471,7 @@ If everything goes well you should be seeing new data-points rendered on chart e
 
 If you navigate to ```http://0.0.0.0:5000``` you should see rendered chart as shown on picture below.
 
-![Application output](/assets/iot-application/iot-app-output.png)
+![Application output](/assets/iot-application/iot-app-output.png.dith.gif)
 
 Complete application with all the code is available for [download](/assets/iot-application/simple-iot-application.zip).
 
diff --git a/posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md b/posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md
index 9b75ac7..5293576 100644
--- a/posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md
+++ b/posts/2018-01-16-using-digitalocean-spaces-object-storage-with-fuse.md
@@ -28,13 +28,13 @@ To make this work you will need DigitalOcean account. If you don't have one you
 
 Instuctions on how to use SSH keys and how to setup them are available in article [How To Use SSH Keys with DigitalOcean Droplets](https://www.digitalocean.com/community/tutorials/how-to-use-ssh-keys-with-digitalocean-droplets).
 
-![DigitalOcean Droplets](/assets/do-fuse/fuse-droplets.png)
+![DigitalOcean Droplets](/assets/do-fuse/fuse-droplets.png.dith.gif)
 
 After we created Droplet it's time to create new Space. This is done by clicking on a button [Create](https://cloud.digitalocean.com/spaces/new) (right top corner) and selecting Spaces. Choose pronounceable ```Unique name``` because we will use it in examples below. You can either choose Private or Public, it doesn't matter in our case. And you can always change that in the future.
 
 When you have created new Space we should [generate Access key](https://cloud.digitalocean.com/settings/api/tokens). This link will guide to the page when you can generate this key. After you create new one, please save provided Key and Secret because Secret will not be shown again.
 
-![DigitalOcean Spaces](/assets/do-fuse/fuse-spaces.png)
+![DigitalOcean Spaces](/assets/do-fuse/fuse-spaces.png.dith.gif)
 
 Now that we have new Space and Access key we should SSH into our machine.
 
diff --git a/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md b/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md
index b743017..ea2bec8 100644
--- a/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md
+++ b/posts/2019-01-03-encoding-binary-data-into-dna-sequence.md
@@ -83,7 +83,7 @@ Deoxyribonucleic acid, a self-replicating material which is **present in nearly
 
 The nucleotide in DNA consists of a sugar (deoxyribose), one of four bases (cytosine (C), thymine (T), adenine (A), guanine (G)), and a phosphate. Cytosine and thymine are pyrimidine bases, while adenine and guanine are purine bases. The sugar and the base together are called a nucleoside.
 
-![DNA](/assets/dna-sequence/dna-basics.jpg#center)
+![DNA](/assets/dna-sequence/dna-basics.jpg.dith.gif)
 
 *DNA (a) forms a double stranded helix, and (b) adenine pairs with thymine and cytosine pairs with guanine. (credit a: modification of work by Jerome Walker, Dennis Myts)*
 
@@ -248,7 +248,7 @@ Then we encode FASTA file from previous operation to encode this data into PNG.
 
 After encoding into PNG format this file looks like this.
 
-![Encoded Quote in PNG format](/assets/dna-sequence/quote.png)
+![Encoded Quote in PNG format](/assets/dna-sequence/quote.png.dith.gif)
 
 The larger the input stream is the larger the PNG file would be.
 
@@ -315,7 +315,7 @@ dd if=<(openssl enc -aes-256-ctr  -pass pass:"$(dd if=/dev/urandom bs=128 count=
 
 Our freshly generated 1KB file looks something like this (its full of garbage data as intended).
 
-![Sample binary file 1KB](/assets/dna-sequence/sample-binary-file.png)
+![Sample binary file 1KB](/assets/dna-sequence/sample-binary-file.png.dith.gif)
 
 We create following binary files:
 - 1KB.bin
diff --git a/posts/2019-10-19-using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md b/posts/2019-10-19-using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md
index c74501a..088b431 100644
--- a/posts/2019-10-19-using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md
+++ b/posts/2019-10-19-using-sentiment-analysis-for-click-bait-detection-in-rss-feeds.md
@@ -74,7 +74,7 @@ plt.show()
 2. Rule-based approach may not be the best way of doing this. By using deep learning we would be able to get better insights.
 3. **Next step would be to** periodically fetch RSS items and store them over a longer period of time and then perform analysis again and use either machine learning or deep learning on top of it.
 
-![Relationship between title and description](/assets/sentiment-analysis/guardian-sa-title-desc-relationship.png)
+![Relationship between title and description](/assets/sentiment-analysis/guardian-sa-title-desc-relationship.png.dith.gif)
 
 Figure above displays difference between title and description sentiment for specific RSS feed item. 1 means positive and -1 means negative sentiment.
 
diff --git a/posts/2020-03-22-simple-sse-based-pubsub-server.md b/posts/2020-03-22-simple-sse-based-pubsub-server.md
index 4256aed..4db3a57 100644
--- a/posts/2020-03-22-simple-sse-based-pubsub-server.md
+++ b/posts/2020-03-22-simple-sse-based-pubsub-server.md
@@ -23,7 +23,7 @@ Publisher Subscriber model is nothing new and there are many amazing solutions o
 
 The easiest way to explain this is with diagram bellow. Basic function is simple. We have subscribers that receive messages, and we have publishers that create and post messages. Similar model is also well know pattern that works on a premise of consumers and producers, and they take similar roles.
 
-![How PubSub works](/assets/simple-pubsub-server/pubsub-overview.png)
+![How PubSub works](/assets/simple-pubsub-server/pubsub-overview.png.dith.gif)
 
 **These are some naive characteristics we want to achieve:**
 
@@ -49,7 +49,7 @@ Read more about it on [official specification page](https://html.spec.whatwg.org
 
 ### Current browser support
 
-![Browser support](../assets/simple-pubsub-server/caniuse.png)
+![Browser support](../assets/simple-pubsub-server/caniuse.png.dith.gif)
 
 Check [https://caniuse.com/#feat=eventsource](https://caniuse.com/#feat=eventsource) for latest information about browser support.
 
@@ -107,7 +107,7 @@ Google Chrome provides build-in debugging and exploration tool for [Server-Sent
 
 > You can debug only client side events that get received and not the server ones. For debugging server events add `console.log` to `server.js` code and print out events.
 
-![Google Chrome Developer Tools EventStream](../assets/simple-pubsub-server/chrome-debugging.png)
+![Google Chrome Developer Tools EventStream](../assets/simple-pubsub-server/chrome-debugging.png.dith.gif)
 
 ## Server implementation
 
diff --git a/posts/2020-09-06-esp-and-micropython.md b/posts/2020-09-06-esp-and-micropython.md
index a0a3b93..730ca7e 100644
--- a/posts/2020-09-06-esp-and-micropython.md
+++ b/posts/2020-09-06-esp-and-micropython.md
@@ -25,7 +25,7 @@ A while ago I bought some [ESP8266](https://www.espressif.com/en/products/socs/e
 
 For my project, I used [ESP32](https://www.espressif.com/en/products/socs/esp32) but I could easily choose [ESP8266](https://www.espressif.com/en/products/socs/esp8266). This guide contains which tools I use and how I prepared my workspace to code for [ESP8266](https://www.espressif.com/en/products/socs/esp8266).
 
-![ESP8266 and ESP32 boards](/assets/esp8366-micropython/boards.jpg)
+![ESP8266 and ESP32 boards](/assets/esp8366-micropython/boards.jpg.dith.gif)
 
 This guide covers:
 - flashing SOC
diff --git a/posts/2020-09-08-bind-warning-on-login.md b/posts/2020-09-08-bind-warning-on-login.md
index ab26b0c..cae781f 100644
--- a/posts/2020-09-08-bind-warning-on-login.md
+++ b/posts/2020-09-08-bind-warning-on-login.md
@@ -23,7 +23,7 @@ bind '"\e[Z":menu-complete-backward'
 
 I haven't noticed anything wrong with this and all was working fine until I restarted my machine and then I got this error.
 
-![Profile bind error](/assets/profile-bind-error/error.jpg)
+![Profile bind error](/assets/profile-bind-error/error.jpg.dith.gif)
 
 When I pressed OK, I got into the [Gnome shell](https://wiki.gnome.org/Projects/GnomeShell) and all was working fine, but the error was still bugging me. I started looking for the reason why this is happening and found a solution to this error on [Remote SSH Commands - bash bind warning: line editing not enabled](https://superuser.com/a/892682).
 
diff --git a/posts/2021-01-24-replacing-dropbox-with-s3.md b/posts/2021-01-24-replacing-dropbox-with-s3.md
index 4a181b5..55f8923 100644
--- a/posts/2021-01-24-replacing-dropbox-with-s3.md
+++ b/posts/2021-01-24-replacing-dropbox-with-s3.md
@@ -80,7 +80,7 @@ You can use this script in a combination with [Cron](https://en.wikipedia.org/wi
 
 When you start syncing your local stuff with a remote server you can review your items on DigitalOcean.
 
-![Dropbox Spaces](/assets/dropbox-sync/dropbox-spaces.png)
+![Dropbox Spaces](/assets/dropbox-sync/dropbox-spaces.png.dith.gif)
 
 I have been using this script now for quite some time, and it's working flawlessly. I also uninstalled Dropbox and stopped using it completely.
 
diff --git a/posts/2021-01-25-goaccess.md b/posts/2021-01-25-goaccess.md
index 7b5ba5c..e0bda95 100644
--- a/posts/2021-01-25-goaccess.md
+++ b/posts/2021-01-25-goaccess.md
@@ -31,10 +31,10 @@ I found this amazing software [GoAccess](https://goaccess.io/) which provides al
 
 GoAccess can be used in two different modes.
 
-![GoAccess Terminal](/assets/goaccess/goaccess-dash-term.png)
+![GoAccess Terminal](/assets/goaccess/goaccess-dash-term.png.dith.gif)
 <center><i>Running in a terminal</i></center>
 
-![GoAccess HTML](/assets/goaccess/goaccess-dash-html.png)
+![GoAccess HTML](/assets/goaccess/goaccess-dash-html.png.dith.gif)
 <center><i>Running in a browser</i></center>
 
 I, however, need this to run in a browser. So, the second option is the way to go. The Idea is to periodically run cronjob and export this report into a folder that gets then server by Nginx behind a Basic authentication.
diff --git a/posts/2021-06-26-simple-world-clock.md b/posts/2021-06-26-simple-world-clock.md
index 29c199a..1e1cd99 100644
--- a/posts/2021-06-26-simple-world-clock.md
+++ b/posts/2021-06-26-simple-world-clock.md
@@ -15,7 +15,7 @@ But I also have a bunch of electronics that I bought through the time, and I am
 
 A while ago I bought a small eInk display [Inky pHAT](https://shop.pimoroni.com/products/inky-phat?variant=12549254217811) and I have a bunch of [Raspberry Pi's Zero](https://www.raspberrypi.org/products/raspberry-pi-zero/) lying around that I really need to use.
 
-![Inky pHAT, Raspberry Pi Zero](/assets/world-clock/hardware.jpg)
+![Inky pHAT, Raspberry Pi Zero](/assets/world-clock/hardware.jpg.dith.gif)
 
 Since the Inky [Inky pHAT](https://shop.pimoroni.com/products/inky-phat?variant=12549254217811) is essentially a HAT, it can easily be added on top of the [Raspberry Pi Zero](https://www.raspberrypi.org/products/raspberry-pi-zero/).
 
@@ -80,7 +80,7 @@ Then we add a cronjob with `crontab -e`.
 
 So, we end up with a result like this.
 
-![World Clock](/assets/world-clock/world-clock.jpg)
+![World Clock](/assets/world-clock/world-clock.jpg.dith.gif)
 
 And for the enclosure that can be 3D printed, but I haven't yet something like this can be used.
 
diff --git a/template/_meta.html b/template/_meta.html
index 9d92e34..b617f0f 100755
--- a/template/_meta.html
+++ b/template/_meta.html
@@ -3,10 +3,10 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
-<link rel="stylesheet" href="/style.css?v=20210731-11">
+<link rel="stylesheet" href="/style.css?v=2021-10-07">
 
 <link rel="alternate" type="application/rss+xml" href="/feed.rss">
 <link rel="alternate" type="application/feed+json" href="/feed.json">
 <link rel="alternate" type="application/rss+xml" href="/yapyap.xml" title="YapYap">
 
-<link rel="icon" href="/assets/general/favicon.png?v=20210731-01" type="image/png">
+<link rel="icon" href="/assets/general/favicon.png?v=2021-10-07" type="image/png">
diff --git a/template/script.js b/template/script.js
index 8b13789..3d80484 100755
--- a/template/script.js
+++ b/template/script.js
@@ -1 +1,17 @@
+// dither image on mouse over replace
+document.querySelectorAll('article img').forEach(img => {
 
+  const ditheredImage = img.src;
+  const originalImage = img.src.replace('.dith.gif', '');
+
+  img.addEventListener('mouseover', evt => {
+    evt.target.src = originalImage;
+    console.log('mouseover')
+  });
+
+  img.addEventListener('mouseout', evt => {
+    evt.target.src = ditheredImage;
+    console.log('mouseout')
+  });
+
+});
diff --git a/template/style.css b/template/style.css
index 8152dab..8da06fd 100755
--- a/template/style.css
+++ b/template/style.css
@@ -307,6 +307,7 @@ article img {
   position: relative;
   left: -10%;
   margin: 70px auto;
+  border: 1px solid #eee;
 }
 
 article strong {