From d3dfec6f52d8093db276adb62021ced8f58e590c Mon Sep 17 00:00:00 2001 From: Mitja Felicijan Date: Sun, 5 Nov 2023 12:17:03 +0100 Subject: Added lazy loading to images --- ...ng-python-web-applications-with-visual-tools.md | 6 ++-- _posts/2017-08-11-simple-iot-application.md | 8 ++--- ...digitalocean-spaces-object-storage-with-fuse.md | 4 +-- ...01-03-encoding-binary-data-into-dna-sequence.md | 10 +++---- ...g-sentiment-analysis-for-clickbait-detection.md | 2 +- .../2020-03-22-simple-sse-based-pubsub-server.md | 6 ++-- _posts/2020-09-06-esp-and-micropython.md | 2 +- _posts/2020-09-08-bind-warning-on-login.md | 2 +- _posts/2021-01-24-replacing-dropbox-with-s3.md | 2 +- _posts/2021-01-25-goaccess.md | 4 +-- _posts/2021-06-26-simple-world-clock.md | 4 +-- ...n-based-riced-up-distribution-for-developers.md | 18 ++++++------ ...021-12-25-running-golang-application-as-pid1.md | 2 +- _posts/2021-12-30-wap-mobile-web-before-the-web.md | 2 +- _posts/2022-06-30-trying-out-helix-editor.md | 2 +- ...22-07-05-what-would-dna-sound-if-synthesized.md | 18 ++++++------ _posts/2022-08-13-algae-spotted-on-river-sava.md | 12 ++++---- _posts/2023-05-24-fresh-9front-desktop.md | 2 +- _posts/2023-05-25-dcss-new-player-guide.md | 2 +- _posts/2023-05-25-show-xterm-colors.md | 2 +- _posts/2023-05-27-drawing-pixels-in-plan9.md | 2 +- _posts/2023-05-29-grep-to-less-maintain-colors.md | 2 +- ...2023-06-25-development-environments-with-nix.md | 2 +- ...23-08-01-make-b-w-svg-charts-with-matplotlib.md | 2 +- _posts/2023-08-05-floods-in-slovenia.md | 4 +-- ...4-using-ffmpeg-to-combine-video-side-by-side.md | 2 +- .../2023-11-05-add-lazy-loading-to-jekyll-posts.md | 34 ++++++++++++++++++++++ 27 files changed, 96 insertions(+), 62 deletions(-) create mode 100644 _posts/2023-11-05-add-lazy-loading-to-jekyll-posts.md (limited to '_posts') 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 70e25f9..2e2ec70 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 @@ -22,7 +22,7 @@ If you are using MacOS you should check out [Profiling Viewer](http://www.profilingviewer.com/) or [MacCallGrind](http://www.maccallgrind.com/). -![KCachegrind](/assets/posts/python-profiling/kcachegrind.png) +![KCachegrind](/assets/posts/python-profiling/kcachegrind.png){:loading="lazy"} We will be dividing this post into two main categories: @@ -147,7 +147,7 @@ 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/posts/python-profiling/profiling-viewer.png) +![Profilling Viewer](/assets/posts/python-profiling/profiling-viewer.png){:loading="lazy"} > 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 @@ -178,7 +178,7 @@ $ snakeviz awesome_random_number.prof # shows visualized profile ``` -![SnakeViz](/assets/posts/python-profiling/snakeviz.png) +![SnakeViz](/assets/posts/python-profiling/snakeviz.png){:loading="lazy"} 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 3c9b4f9..b552e8f 100644 --- a/_posts/2017-08-11-simple-iot-application.md +++ b/_posts/2017-08-11-simple-iot-application.md @@ -51,7 +51,7 @@ to API and another to serving HTML with chart. Schema below represents what we will try to achieve and how different parts correlates to each other. -![Overview](/assets/posts/iot-application/simple-iot-application-overview.svg) +![Overview](/assets/posts/iot-application/simple-iot-application-overview.svg){:loading="lazy"} ## Simple Python API @@ -219,12 +219,12 @@ available via POST method on /api route. 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/posts/iot-application/iot-rest-example.png) +![REST settings example](/assets/posts/iot-application/iot-rest-example.png){:loading="lazy"} 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/posts/iot-application/iot-sqlite-db.png) +![SQLite database example](/assets/posts/iot-application/iot-sqlite-db.png){:loading="lazy"} 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 @@ -586,7 +586,7 @@ every 5 seconds. If you navigate to ```http://0.0.0.0:5000``` you should see rendered chart as shown on picture below. -![Application output](/assets/posts/iot-application/iot-app-output.png) +![Application output](/assets/posts/iot-application/iot-app-output.png){:loading="lazy"} Complete application with all the code is available for [download](/assets/posts/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 543439f..d29bd09 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 @@ -56,7 +56,7 @@ 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/posts/do-fuse/fuse-droplets.png) +![DigitalOcean Droplets](/assets/posts/do-fuse/fuse-droplets.png){:loading="lazy"} 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 @@ -69,7 +69,7 @@ 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/posts/do-fuse/fuse-spaces.png) +![DigitalOcean Spaces](/assets/posts/do-fuse/fuse-spaces.png){:loading="lazy"} 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 0bb774e..1de83af 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 @@ -110,7 +110,7 @@ The nucleotide in DNA consists of a sugar (deoxyribose), one of four bases 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/posts/dna-sequence/dna-basics.jpg) +![DNA](/assets/posts/dna-sequence/dna-basics.jpg){:loading="lazy"} *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)* @@ -300,7 +300,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/posts/dna-sequence/quote.png) +![Encoded Quote in PNG format](/assets/posts/dna-sequence/quote.png){:loading="lazy"} The larger the input stream is the larger the PNG file would be. Compiled basic Hello World C program with @@ -369,7 +369,7 @@ dd if=<(openssl enc -aes-256-ctr -pass pass:"$(dd if=/dev/urandom bs=128 count= ``` -![Sample binary file 1KB](/assets/posts/dna-sequence/sample-binary-file.png) +![Sample binary file 1KB](/assets/posts/dna-sequence/sample-binary-file.png){:loading="lazy"} Our freshly generated 1KB file looks something like this (its full of garbage data as intended). @@ -395,10 +395,10 @@ Then we GZIP all the FASTA files to see how much the can be compressed. gzip -9 < 10MB.fa > 10MB.fa.gz ``` -![Encode to FASTA](/assets/posts/dna-sequence/chart-speed.svg) +![Encode to FASTA](/assets/posts/dna-sequence/chart-speed.svg){:loading="lazy"} The speed increase that occurs when encoding to FASTA format. -![File sizes](/assets/posts/dna-sequence/chart-size.svg) +![File sizes](/assets/posts/dna-sequence/chart-size.svg){:loading="lazy"} Size of the out file after encoding. [Download CSV file with benchmarks](/assets/posts/dna-sequence/benchmarks.csv). diff --git a/_posts/2019-10-19-using-sentiment-analysis-for-clickbait-detection.md b/_posts/2019-10-19-using-sentiment-analysis-for-clickbait-detection.md index 5aad23c..a1b237b 100644 --- a/_posts/2019-10-19-using-sentiment-analysis-for-clickbait-detection.md +++ b/_posts/2019-10-19-using-sentiment-analysis-for-clickbait-detection.md @@ -93,7 +93,7 @@ plt.show() 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/posts/sentiment-analysis/guardian-sa-title-desc-relationship.png) +![Relationship between title and description](/assets/posts/sentiment-analysis/guardian-sa-title-desc-relationship.png){:loading="lazy"} 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 23a3640..ffb7285 100644 --- a/_posts/2020-03-22-simple-sse-based-pubsub-server.md +++ b/_posts/2020-03-22-simple-sse-based-pubsub-server.md @@ -39,7 +39,7 @@ 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/posts/simple-pubsub-server/pubsub-overview.png) +![How PubSub works](/assets/posts/simple-pubsub-server/pubsub-overview.png){:loading="lazy"} **These are some naive characteristics we want to achieve:** @@ -75,7 +75,7 @@ page](https://html.spec.whatwg.org/multipage/server-sent-events.html). ### Current browser support -![Browser support](/assets/posts/simple-pubsub-server/caniuse.png) +![Browser support](/assets/posts/simple-pubsub-server/caniuse.png){:loading="lazy"} Check [https://caniuse.com/#feat=eventsource](https://caniuse.com/#feat=eventsource) @@ -143,7 +143,7 @@ which is quite nice and available from Developer Tools under Network tab. > ones. For debugging server events add `console.log` to `server.js` code and > print out events. -![Google Chrome Developer Tools EventStream](/assets/posts/simple-pubsub-server/chrome-debugging.png) +![Google Chrome Developer Tools EventStream](/assets/posts/simple-pubsub-server/chrome-debugging.png){:loading="lazy"} ## Server implementation diff --git a/_posts/2020-09-06-esp-and-micropython.md b/_posts/2020-09-06-esp-and-micropython.md index 9a005af..bfd05d9 100644 --- a/_posts/2020-09-06-esp-and-micropython.md +++ b/_posts/2020-09-06-esp-and-micropython.md @@ -20,7 +20,7 @@ but I could easily choose 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/posts/esp8366-micropython/boards.jpg) +![ESP8266 and ESP32 boards](/assets/posts/esp8366-micropython/boards.jpg){:loading="lazy"} This guide covers: diff --git a/_posts/2020-09-08-bind-warning-on-login.md b/_posts/2020-09-08-bind-warning-on-login.md index 94b5a5f..4b2c983 100644 --- a/_posts/2020-09-08-bind-warning-on-login.md +++ b/_posts/2020-09-08-bind-warning-on-login.md @@ -31,7 +31,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/posts/profile-bind-error/error.jpg) +![Profile bind error](/assets/posts/profile-bind-error/error.jpg){:loading="lazy"} When I pressed OK, I got into the [Gnome shell](https://wiki.gnome.org/Projects/GnomeShell) and all was working fine, but diff --git a/_posts/2021-01-24-replacing-dropbox-with-s3.md b/_posts/2021-01-24-replacing-dropbox-with-s3.md index fb4ba68..7599949 100644 --- a/_posts/2021-01-24-replacing-dropbox-with-s3.md +++ b/_posts/2021-01-24-replacing-dropbox-with-s3.md @@ -106,7 +106,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/posts/dropbox-sync/dropbox-spaces.png) +![Dropbox Spaces](/assets/posts/dropbox-sync/dropbox-spaces.png){:loading="lazy"} 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 4de65e8..779bce5 100644 --- a/_posts/2021-01-25-goaccess.md +++ b/_posts/2021-01-25-goaccess.md @@ -42,11 +42,11 @@ all the functionalities I need, and it's a single binary. Written in Go. GoAccess can be used in two different modes. -![GoAccess Terminal](/assets/posts/goaccess/goaccess-dash-term.png) +![GoAccess Terminal](/assets/posts/goaccess/goaccess-dash-term.png){:loading="lazy"} *Running in a terminal* -![GoAccess HTML](/assets/posts/goaccess/goaccess-dash-html.png) +![GoAccess HTML](/assets/posts/goaccess/goaccess-dash-html.png){:loading="lazy"} *Running in a browser* diff --git a/_posts/2021-06-26-simple-world-clock.md b/_posts/2021-06-26-simple-world-clock.md index 31692e1..d1b53b4 100644 --- a/_posts/2021-06-26-simple-world-clock.md +++ b/_posts/2021-06-26-simple-world-clock.md @@ -24,7 +24,7 @@ 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/posts/world-clock/hardware.jpg) +![Inky pHAT, Raspberry Pi Zero](/assets/posts/world-clock/hardware.jpg){:loading="lazy"} Since the Inky [Inky pHAT](https://shop.pimoroni.com/products/inky-phat?variant=12549254217811) is @@ -95,7 +95,7 @@ Then we add a cronjob with `crontab -e`. So, we end up with a result like this. -![World Clock](/assets/posts/world-clock/world-clock.jpg) +![World Clock](/assets/posts/world-clock/world-clock.jpg){:loading="lazy"} And for the enclosure that can be 3D printed, but I haven't yet something like this can be used. diff --git a/_posts/2021-12-03-debian-based-riced-up-distribution-for-developers.md b/_posts/2021-12-03-debian-based-riced-up-distribution-for-developers.md index b469a05..4f9bc09 100644 --- a/_posts/2021-12-03-debian-based-riced-up-distribution-for-developers.md +++ b/_posts/2021-12-03-debian-based-riced-up-distribution-for-developers.md @@ -77,35 +77,35 @@ Fonts being applied across the distro and things like that. First, I choose terminal installer and left it to load additional components. Avoid using graphical installer in this case. -![](/assets/posts/dfd-rice/install-00.png) +![](/assets/posts/dfd-rice/install-00.png){:loading="lazy"} After that I selected hostname and created a normal user and set password for that user and root user and choose guided mode for disk partitioning. -![](/assets/posts/dfd-rice/install-01.png) +![](/assets/posts/dfd-rice/install-01.png){:loading="lazy"} I left it run to install all the things required for the base system and opted out of scanning additional media for use by the package manager. Those will be downloaded from the internet during installation. -![](/assets/posts/dfd-rice/install-02.png) +![](/assets/posts/dfd-rice/install-02.png){:loading="lazy"} I opted out of the popularity contest, and **now comes the important part**. Uncheck all the boxes in Software selection and only leave 'standard system utilities'. I also left an SSH server, so I was able to log in to the machine from my main PC. -![](/assets/posts/dfd-rice/install-03.png) +![](/assets/posts/dfd-rice/install-03.png){:loading="lazy"} At this point, I installed GRUB bootloader on the disk where I installed the system. -![](/assets/posts/dfd-rice/install-04.png) +![](/assets/posts/dfd-rice/install-04.png){:loading="lazy"} That concluded the installation of base Debian and after restarting the computer I was prompted with the login screen. -![](/assets/posts/dfd-rice/install-05.png) +![](/assets/posts/dfd-rice/install-05.png){:loading="lazy"} Now that I had the base installation, it was time to choose what software do I want to include in this so-called distribution. I wanted out of the box @@ -142,7 +142,7 @@ What I was doing in Gnome was having windows in a layout like the diagram below. This is my common practice. And if you look at it you can clearly see I was replicating tiling window manager setup in Gnome. -![](/assets/posts/dfd-rice/layout.png) +![](/assets/posts/dfd-rice/layout.png){:loading="lazy"} That made me look into a bunch of tiling window managers and then tested them out. Candidates I was looking at were: @@ -212,7 +212,7 @@ something similar. This is some of the output from the installation script. -![](/assets/posts/dfd-rice/script.png) +![](/assets/posts/dfd-rice/script.png){:loading="lazy"} Let's take a look at some examples in the installation script. @@ -274,4 +274,4 @@ And this is how it looks with two terminals side by side. I really like the simplicity and clean interface. I will polish the colors and stuff like that, but I really do like the results. -![](/assets/posts/dfd-rice/desktop.png) +![](/assets/posts/dfd-rice/desktop.png){:loading="lazy"} diff --git a/_posts/2021-12-25-running-golang-application-as-pid1.md b/_posts/2021-12-25-running-golang-application-as-pid1.md index 1f67ee1..edd5a57 100644 --- a/_posts/2021-12-25-running-golang-application-as-pid1.md +++ b/_posts/2021-12-25-running-golang-application-as-pid1.md @@ -24,7 +24,7 @@ Really worth a read. If we compare a normal operating system to a unikernel side by side, they would look something like this. -![Virtual machines vs Containers vs Unikernels](/assets/posts/pid1/unikernels.webp) +![Virtual machines vs Containers vs Unikernels](/assets/posts/pid1/unikernels.webp){:loading="lazy"} From this image, we can see how the complexity significantly decreases with the use of Unikernels. This comes with a price, of course. Unikernels are hard diff --git a/_posts/2021-12-30-wap-mobile-web-before-the-web.md b/_posts/2021-12-30-wap-mobile-web-before-the-web.md index 058ad55..665be0f 100644 --- a/_posts/2021-12-30-wap-mobile-web-before-the-web.md +++ b/_posts/2021-12-30-wap-mobile-web-before-the-web.md @@ -33,7 +33,7 @@ These phones were rocking: Let's take a look at these beauties. -![Old phones](/assets/posts/wap/phones.gif) +![Old phones](/assets/posts/wap/phones.gif){:loading="lazy"} ## WAP - Wireless Application Protocol diff --git a/_posts/2022-06-30-trying-out-helix-editor.md b/_posts/2022-06-30-trying-out-helix-editor.md index c6ebd6f..61f653a 100644 --- a/_posts/2022-06-30-trying-out-helix-editor.md +++ b/_posts/2022-06-30-trying-out-helix-editor.md @@ -48,7 +48,7 @@ popups that show you what the keyboard shortcuts are. And it comes us packed with many [really good themes](https://github.com/helix-editor/helix/wiki/Themes). -![Editor](/assets/posts/helix-editor/editor.png) +![Editor](/assets/posts/helix-editor/editor.png){:loading="lazy"} It's still young but has this mature feeling to it. It has sane defaults and mimics Vim (works a bit differently, but the overall idea is similar). diff --git a/_posts/2022-07-05-what-would-dna-sound-if-synthesized.md b/_posts/2022-07-05-what-would-dna-sound-if-synthesized.md index 7aaac68..6efe559 100644 --- a/_posts/2022-07-05-what-would-dna-sound-if-synthesized.md +++ b/_posts/2022-07-05-what-would-dna-sound-if-synthesized.md @@ -178,7 +178,7 @@ An example spectrogram of Ludwig van Beethoven Symphony No. 6 First movement. -![Ludwig van Beethoven Symphony No. 6 First movement](/assets/posts/dna-synthesized/symphony-no6-1st-movement.png) +![Ludwig van Beethoven Symphony No. 6 First movement](/assets/posts/dna-synthesized/symphony-no6-1st-movement.png){:loading="lazy"} The other option could also be in combination with [gnuplot](http://www.gnuplot.info/). This would require an intermediary step, @@ -233,7 +233,7 @@ spectrogram based on a WAV file. -![Spectogram](/assets/posts/dna-synthesized/quote/spectogram.png) +![Spectogram](/assets/posts/dna-synthesized/quote/spectogram.png){:loading="lazy"} ### Mouse @@ -245,7 +245,7 @@ here](http://ftp.ensembl.org/pub/release-106/fasta/mus_musculus/dna/). -![Spectogram](/assets/posts/dna-synthesized/mouse/spectogram.png) +![Spectogram](/assets/posts/dna-synthesized/mouse/spectogram.png){:loading="lazy"} ### Bison @@ -257,7 +257,7 @@ here](http://ftp.ensembl.org/pub/release-106/fasta/bison_bison_bison/cdna/). -![Spectogram](/assets/posts/dna-synthesized/bison/spectogram.png) +![Spectogram](/assets/posts/dna-synthesized/bison/spectogram.png){:loading="lazy"} ### Taurus @@ -269,7 +269,7 @@ here](http://ftp.ensembl.org/pub/release-106/fasta/bos_taurus/cdna/). -![Spectogram](/assets/posts/dna-synthesized/taurus/spectogram.png) +![Spectogram](/assets/posts/dna-synthesized/taurus/spectogram.png){:loading="lazy"} ## Making a drummer out of a DNA sequence @@ -282,11 +282,11 @@ Elektron is connected to my MacBook via USB cable and audio out is patched to a Sony Bluetooth speaker I have that supports 3.5 mm audio in. Elektron doesn't have internal speakers. -![](/assets/posts/dna-synthesized/elektron/IMG_0619.jpg) +![](/assets/posts/dna-synthesized/elektron/IMG_0619.jpg){:loading="lazy"} -![](/assets/posts/dna-synthesized/elektron/IMG_0620.jpg) +![](/assets/posts/dna-synthesized/elektron/IMG_0620.jpg){:loading="lazy"} -![](/assets/posts/dna-synthesized/elektron/IMG_0622.jpg) +![](/assets/posts/dna-synthesized/elektron/IMG_0622.jpg){:loading="lazy"} For communicating with Elektron, I choose `pygame` Python module that has MIDI built in. With this, it was rather simple to send notes to the device. All I did @@ -295,7 +295,7 @@ was map MIDI notes to the actual Nucleotides. Before all of this I also checked Audio MIDI Setup app under MacOS and checked MIDI Studio by pressing ⌘-2. -![](/assets/posts/dna-synthesized/elektron/midi-studio.jpg) +![](/assets/posts/dna-synthesized/elektron/midi-studio.jpg){:loading="lazy"} The whole script that parses and send notes to the Elektron looks like this. diff --git a/_posts/2022-08-13-algae-spotted-on-river-sava.md b/_posts/2022-08-13-algae-spotted-on-river-sava.md index 064c112..02314f4 100644 --- a/_posts/2022-08-13-algae-spotted-on-river-sava.md +++ b/_posts/2022-08-13-algae-spotted-on-river-sava.md @@ -15,17 +15,17 @@ This is the first time I've seen something like this in my whole life. Below are some photographs taken from a DJI drone capturing the event. -![Algae on Sava](/assets/posts/algae-sava/dji-algae-0.jpg) +![Algae on Sava](/assets/posts/algae-sava/dji-algae-0.jpg){:loading="lazy"} -![Algae on Sava](/assets/posts/algae-sava/dji-algae-1.jpg) +![Algae on Sava](/assets/posts/algae-sava/dji-algae-1.jpg){:loading="lazy"} -![Algae on Sava](/assets/posts/algae-sava/dji-algae-2.jpg) +![Algae on Sava](/assets/posts/algae-sava/dji-algae-2.jpg){:loading="lazy"} -![Algae on Sava](/assets/posts/algae-sava/dji-algae-3.jpg) +![Algae on Sava](/assets/posts/algae-sava/dji-algae-3.jpg){:loading="lazy"} -![Algae on Sava](/assets/posts/algae-sava/dji-algae-4.jpg) +![Algae on Sava](/assets/posts/algae-sava/dji-algae-4.jpg){:loading="lazy"} -![Algae on Sava](/assets/posts/algae-sava/dji-algae-5.jpg) +![Algae on Sava](/assets/posts/algae-sava/dji-algae-5.jpg){:loading="lazy"} I will try to get more photos of this in the future days and if something intriguing shows up will post it again on the blog. diff --git a/_posts/2023-05-24-fresh-9front-desktop.md b/_posts/2023-05-24-fresh-9front-desktop.md index bdad44a..5da89e7 100644 --- a/_posts/2023-05-24-fresh-9front-desktop.md +++ b/_posts/2023-05-24-fresh-9front-desktop.md @@ -11,5 +11,5 @@ tags: [plan9] I have been experimenting with Plan9/9front for a week now. Noice! This is how my desktop looks like. -![9front desktop](/assets/notes/9front-desktop.png) +![9front desktop](/assets/notes/9front-desktop.png){:loading="lazy"} diff --git a/_posts/2023-05-25-dcss-new-player-guide.md b/_posts/2023-05-25-dcss-new-player-guide.md index 76242f3..dd63f79 100644 --- a/_posts/2023-05-25-dcss-new-player-guide.md +++ b/_posts/2023-05-25-dcss-new-player-guide.md @@ -15,7 +15,7 @@ form on another on [craw's](https://github.com/crawl/crawl) official repository. game - [DCSS Manual](/assets/notes/dcss_manual.pdf) - Extensive manual about the game -![Dungeon Crawl Stone Soup](/assets/notes/dcss.jpg) +![Dungeon Crawl Stone Soup](/assets/notes/dcss.jpg){:loading="lazy"} **Movement and Exploration** diff --git a/_posts/2023-05-25-show-xterm-colors.md b/_posts/2023-05-25-show-xterm-colors.md index 00a3e76..56050fd 100644 --- a/_posts/2023-05-25-show-xterm-colors.md +++ b/_posts/2023-05-25-show-xterm-colors.md @@ -11,7 +11,7 @@ tags: [linux] - `bash xterm-palette.sh` - will show you number of max colors available - `bash xterm-palette.sh -v` - will create a list of all colors with codes -![xterm color palette](/assets/notes/xterm-palette.png) +![xterm color palette](/assets/notes/xterm-palette.png){:loading="lazy"} ```sh #!/usr/bin/env bash diff --git a/_posts/2023-05-27-drawing-pixels-in-plan9.md b/_posts/2023-05-27-drawing-pixels-in-plan9.md index c1e9335..3d37a2c 100644 --- a/_posts/2023-05-27-drawing-pixels-in-plan9.md +++ b/_posts/2023-05-27-drawing-pixels-in-plan9.md @@ -22,7 +22,7 @@ More information: - [all man pages](https://9fans.github.io/plan9port/man/man3/) can be a valuable resource for learning about the system -![Plan9 Howdy World!](/assets/notes/plan9-pixels.png) +![Plan9 Howdy World!](/assets/notes/plan9-pixels.png){:loading="lazy"} ```c // main.c diff --git a/_posts/2023-05-29-grep-to-less-maintain-colors.md b/_posts/2023-05-29-grep-to-less-maintain-colors.md index 49baa01..b1421b9 100644 --- a/_posts/2023-05-29-grep-to-less-maintain-colors.md +++ b/_posts/2023-05-29-grep-to-less-maintain-colors.md @@ -23,4 +23,4 @@ string. grep --color=always -rni "TODO:" | less -R ``` -![Less and grep](/assets/notes/grep-less.png) +![Less and grep](/assets/notes/grep-less.png){:loading="lazy"} diff --git a/_posts/2023-06-25-development-environments-with-nix.md b/_posts/2023-06-25-development-environments-with-nix.md index ddac7e0..a905f10 100644 --- a/_posts/2023-06-25-development-environments-with-nix.md +++ b/_posts/2023-06-25-development-environments-with-nix.md @@ -59,7 +59,7 @@ export PS1="[\033[38;5;9m\]\u@\h\[$(tput sgr0)\]]$(is_inside_nix_shell)\[\033[33 And this is what it looks like when you are in a Nix shell. Otherwise that part of prompt is omitted -![PS1 Prompt](/assets/notes/ps1-prompt.png) +![PS1 Prompt](/assets/notes/ps1-prompt.png){:loading="lazy"} More resources: diff --git a/_posts/2023-08-01-make-b-w-svg-charts-with-matplotlib.md b/_posts/2023-08-01-make-b-w-svg-charts-with-matplotlib.md index 6e1fa14..461842d 100644 --- a/_posts/2023-08-01-make-b-w-svg-charts-with-matplotlib.md +++ b/_posts/2023-08-01-make-b-w-svg-charts-with-matplotlib.md @@ -66,6 +66,6 @@ legend.get_frame().set_linewidth(0) plt.savefig("plot.svg", format="svg") ``` -![SVG Chart](/assets/notes/plot.svg) +![SVG Chart](/assets/notes/plot.svg){:loading="lazy"} The image above is SVG and you can zoom in and out and check that the image is vector. diff --git a/_posts/2023-08-05-floods-in-slovenia.md b/_posts/2023-08-05-floods-in-slovenia.md index 5a42781..8b2354a 100644 --- a/_posts/2023-08-05-floods-in-slovenia.md +++ b/_posts/2023-08-05-floods-in-slovenia.md @@ -11,9 +11,9 @@ draft: false -![](/assets/notes/floods/IMG_1469.webp) +![](/assets/notes/floods/IMG_1469.webp){:loading="lazy"} -![](/assets/notes/floods/IMG_1470.webp) +![](/assets/notes/floods/IMG_1470.webp){:loading="lazy"} diff --git a/_posts/2023-11-04-using-ffmpeg-to-combine-video-side-by-side.md b/_posts/2023-11-04-using-ffmpeg-to-combine-video-side-by-side.md index 23d14b7..c47a726 100644 --- a/_posts/2023-11-04-using-ffmpeg-to-combine-video-side-by-side.md +++ b/_posts/2023-11-04-using-ffmpeg-to-combine-video-side-by-side.md @@ -38,4 +38,4 @@ ffmpeg -y \ - This will also cap frame rate to 6 (refer to `fps=6`) since that is enough and this makes playback of GIFs smoother in a browser. -![Result](./assets/notes/trigraphs.gif) +![Result](./assets/notes/trigraphs.gif){:loading="lazy"} diff --git a/_posts/2023-11-05-add-lazy-loading-to-jekyll-posts.md b/_posts/2023-11-05-add-lazy-loading-to-jekyll-posts.md new file mode 100644 index 0000000..8293a4d --- /dev/null +++ b/_posts/2023-11-05-add-lazy-loading-to-jekyll-posts.md @@ -0,0 +1,34 @@ +--- +title: "Add lazy loading of images in Jekyll posts" +permalink: /add-lazy-loading-to-jekyll-posts.html +date: 2023-11-05T09:04:28+02:00 +layout: post +type: note +draft: false +--- + +Normally you define images with `![]()` in markdown files. But jekyll also +provides a way to adding custom attributes to tags with `{:attr="value"}`. + +If you have lots of posts this command will append `{:loading="lazy"}` to all +images in all your markdown files. + +```md +![image-title](/path/to/your/image.jpg) +``` + +will become + +```md +![image-title](/path/to/your/image.jpg){:loading="lazy"} +``` + +Shell line bellow. Go into the folder where your posts are (probably `_posts`). + +```sh +find . -type f -name "*.md" -exec sed -i -E 's/(\!\[.*\]\((.*?)\))$/\1{:loading="lazy"}/' {} \; +``` + +Under the hood this adds `loading="lazy"` to HTML `img` nodes. + +That is about it. -- cgit v1.2.3