ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

commit ada65148b029337f22020e67debb24593ef6be2d
parent d9f67e5e1d5253d4acacefc0993aecea5ccb89a5
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Sat,  2 May 2020 03:05:39 +0700

feature: image and lazyloading

Diffstat:
Mconfig.dev.toml | 2+-
Mconfig.toml | 2+-
Dcontent/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim.md | 68--------------------------------------------------------------------
Acontent/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ia-writer-headline.jpg | 0
Acontent/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ia-writer-portrait.jpg | 0
Acontent/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/index.md | 69+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Acontent/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ivim.jpg | 0
Alayouts/_default/_markup/render-image.html | 31+++++++++++++++++++++++++++++++
Mlayouts/partials/head/head.html | 3+--
Astatic/lazyImage.js | 18++++++++++++++++++

10 files changed, 121 insertions(+), 72 deletions(-)

diff --git a/config.dev.toml b/config.dev.toml
@@ -3,7 +3,7 @@ languageCode = "en-us"
 title = "YBBond"
 
 [permalinks]
-  posts = "/posts/:year/:month/:title/"
+  posts = "/posts/:year-:month-:title/"
 
 [params]
   author = "Yohanes Bandung Bondowoso"
diff --git a/config.toml b/config.toml
@@ -3,7 +3,7 @@ languageCode = "en-us"
 title = "YBBond"
 
 [permalinks]
-  posts = "/posts/:year/:month/:title/"
+  posts = "/posts/:year-:month-:title/"
 
 [params]
   author = "Yohanes Bandung Bondowoso"
diff --git a/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim.md b/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim.md
@@ -1,68 +0,0 @@
----
-title: In Search of Good Writing App - Part 2, iA Writer vs iVim
-author: Yohanes Bandung Bondowoso
-description: A week with Bear, I tried other writing tool for my iPad.
-tags:
-  - Apps #apps
-  - Apple Apps #apple_apps
-date: 2020-04-01T18:22:31
-image:
-  src: https://cdn.ybbond.dev/pictures/blog/2020-04-01-in-search-of-good-writing-app-part-2/ia-writer-headline.jpg
----
-
-> “Orang emang gak pernah puas!” - Indonesian colloquial sayings
->
-> “People are never satisfied” - Paulo Coelho’s almost literal translation
-
-Part 2 of my previous post: [In Search of Good Writing App - Bear vs Ulysses](/posts/2020/03/in-search-of-good-writing-app-bear-vs-ulysses/)
-
----
-
-In the previous post, I compared [Ulysses](https://ulysses.app/) and [Bear](https://bear.app). I ended up subscribing to Bear. Bear itself is a good writing app, with nice clean interface design, great synchronization between MacOS and iOS (or iPadOS) platform, with a _just right_ MarkDown implementation.
-
-I feel satisfied with my three days of Bear usage. The subscription model does not bother me, but I found several aspect to reconsider:
-
-### Backup
-One thing I like from Ulysses is file versioning similar to MacOS's _Time Machine_. Bear lacks that feature, changes I made will replace the previous version of the file in iCloud. The only way to access file history in Bear is through undo. Yep, plain old undo.
-
-### File Storage
-Bear store my notes in its own enclosed library. I have no option to store my notes in external folder. This issue makes me think about the continuity of this subscription. Other writer also stated [this issue](https://joseperez.fm/2019/goodbye-bear-hello-ia-writer/), and his post gave me the idea to check **iA Writer**.
-
-### Modal Editing
-I came from modal editing world. The lack of **Vim** keybinding annoys me. This aspect is of my very own opinion.
-
-Thus came other candidates
-
-## iA Writer
-
-I installed the trial version on Mac. The main takeaway is iA Writer give the writer full control of its edited file. It uses iCloud to sync between devices. Mac version also has file versioning similar to _Time Machine_. iA Writer also supports opening external folder, enabling me to edit markdown file from my GitHub Gist.
-
-![iA Writer with its unique syntax highlighting](https://cdn.ybbond.dev/pictures/blog/2020-04-01-in-search-of-good-writing-app-part-2/ia-writer-headline.jpg)
-
-The app supports _focus mode_, which consists of _typewriter mode_ similar to Ulysses' and [syntax highlighting](https://ia.net/topics/ia5_writer_features/syntax-highlight) that unique to iA Writer. The latter feature sounds unnecessary to me, because I thought highlighting non-code text will distracts me more than it helps me. I tried writing with _syntax highlighting_ on, and I realized it helps choosing good words and/or 'refactoring' the written text. The app's website has good [blog posts](https://ia.net/writer/support/writing-tips/parts-of-speech) that give tips to write well.
-
-iA Writer also has side-by-side preview feature. Plus point is this app has good shortcut to access its main features.
-
-I consider this app pricey. It uses single payment approach, the Mac version costs Rp450000 while the iOS (iPadOS included) version costs Rp120000. I use the iA Writer trial on Mac for a while, kinda like it, but it reminds me to one 'writing app' that I consider home.
-
-That is Goyo plugin on Vim. Then I searched for Vim in iPadOS. I found it.
-
-## iVim
-
-![Image of the keyboard](https://cdn.ybbond.dev/pictures/blog/2020-04-01-in-search-of-good-writing-app-part-2/ivim.jpg)
-
-I thought Vim app in iOS will be limiting and can only edit the files in the app's bundle file. I found iVim can edit file from other source. It also supports vimrc and plugins too! [This posts](https://www.reddit.com/r/vim/comments/9ki5g8/ivim_ios_howtos/) helps me a lot.
-
-I configured my iVim as a Zen Writing Tool_. I installed `Goyo`, `vim-markdown`, and Tim Pope's essential shortcut plugins that have been accompanying my typing journey for 2 years. The result is satisfying:
-
-I use all of Bear, iA Writer (on Mac) and iVim for a while, eliminated Bear because of its low I mentioned above, and feel that the lack of preview makes iVim lacky. I read from reddit and other "this app vs. that app" posts that iA Writer for iOS is a worth buy. I decided to try purchasing iA Writer for iOS. 
-
-The iOS version of iA Writer has all the great features of its Mac version. It has some quirks though. It  doesn't have built in support to bookmark or scrape website contents (Bear has it), the keyboard shortcut for iPadOS lacks feature to focus on editor. The solution for the first problem is to use Apple's Shortcut. For the second problem, I have to tap the iPad screen each time I opened the menu, inconvenient for keyboard person like me.
-
-## Conclusion
-
-![iA writer for iPadOS, portrait mode](https://cdn.ybbond.dev/pictures/blog/2020-04-01-in-search-of-good-writing-app-part-2/ia-writer-portrait.jpg)
-
-In the end, I prefer iA Writer to iVim and Bear. I like the preview mode, I like the syntax highlighting, I like when I succeed scripting the shortcut to bookmark or scrape website.
-
-I don't like the lack of good keyboard shortcut and no modal editing, but the good side overcome the bad side easily.
diff --git a/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ia-writer-headline.jpg b/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ia-writer-headline.jpg
Binary files differ.
diff --git a/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ia-writer-portrait.jpg b/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ia-writer-portrait.jpg
Binary files differ.
diff --git a/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/index.md b/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/index.md
@@ -0,0 +1,69 @@
+---
+title: In Search of Good Writing App - Part 2, iA Writer vs iVim
+author: Yohanes Bandung Bondowoso
+description: A week with Bear, I tried other writing tool for my iPad.
+tags:
+  - Apps #apps
+  - Apple Apps #apple_apps
+date: 2020-04-01T18:22:31
+image:
+  src: https://cdn.ybbond.dev/pictures/blog/2020-04-01-in-search-of-good-writing-app-part-2/ia-writer-headline.jpg
+---
+
+> “Orang emang gak pernah puas!” - Indonesian colloquial sayings
+>
+> “People are never satisfied” - Paulo Coelho’s almost literal translation
+
+Part 2 of my previous post: [In Search of Good Writing App - Bear vs Ulysses](/posts/2020/03/in-search-of-good-writing-app-bear-vs-ulysses/)
+
+---
+
+In the previous post, I compared [Ulysses](https://ulysses.app/) and [Bear](https://bear.app). I ended up subscribing to Bear. Bear itself is a good writing app, with nice clean interface design, great synchronization between MacOS and iOS (or iPadOS) platform, with a _just right_ MarkDown implementation.
+
+I feel satisfied with my three days of Bear usage. The subscription model does not bother me, but I found several aspect to reconsider:
+
+### Backup
+One thing I like from Ulysses is file versioning similar to MacOS's _Time Machine_. Bear lacks that feature, changes I made will replace the previous version of the file in iCloud. The only way to access file history in Bear is through undo. Yep, plain old undo.
+
+### File Storage
+Bear store my notes in its own enclosed library. I have no option to store my notes in external folder. This issue makes me think about the continuity of this subscription. Other writer also stated [this issue](https://joseperez.fm/2019/goodbye-bear-hello-ia-writer/), and his post gave me the idea to check **iA Writer**.
+
+### Modal Editing
+I came from modal editing world. The lack of **Vim** keybinding annoys me. This aspect is of my very own opinion.
+
+Thus came other candidates
+
+## iA Writer
+
+I installed the trial version on Mac. The main takeaway is iA Writer give the writer full control of its edited file. It uses iCloud to sync between devices. Mac version also has file versioning similar to _Time Machine_. iA Writer also supports opening external folder, enabling me to edit markdown file from my GitHub Gist.
+
+![iA Writer with its unique syntax highlighting](ia-writer-headline.jpg)
+
+The app supports _focus mode_, which consists of _typewriter mode_ similar to Ulysses' and [syntax highlighting](https://ia.net/topics/ia5_writer_features/syntax-highlight) that unique to iA Writer. The latter feature sounds unnecessary to me, because I thought highlighting non-code text will distracts me more than it helps me. I tried writing with _syntax highlighting_ on, and I realized it helps choosing good words and/or 'refactoring' the written text. The app's website has good [blog posts](https://ia.net/writer/support/writing-tips/parts-of-speech) that give tips to write well.
+
+iA Writer also has side-by-side preview feature. Plus point is this app has good shortcut to access its main features.
+
+I consider this app pricey. It uses single payment approach, the Mac version costs Rp450000 while the iOS (iPadOS included) version costs Rp120000. I use the iA Writer trial on Mac for a while, kinda like it, but it reminds me to one 'writing app' that I consider home.
+
+That is Goyo plugin on Vim. Then I searched for Vim in iPadOS. I found it.
+
+## iVim
+
+
+![Image of the keyboard](ivim.jpg)
+
+I thought Vim app in iOS will be limiting and can only edit the files in the app's bundle file. I found iVim can edit file from other source. It also supports vimrc and plugins too! [This posts](https://www.reddit.com/r/vim/comments/9ki5g8/ivim_ios_howtos/) helps me a lot.
+
+I configured my iVim as a Zen Writing Tool_. I installed `Goyo`, `vim-markdown`, and Tim Pope's essential shortcut plugins that have been accompanying my typing journey for 2 years. The result is satisfying:
+
+I use all of Bear, iA Writer (on Mac) and iVim for a while, eliminated Bear because of its low I mentioned above, and feel that the lack of preview makes iVim lacky. I read from reddit and other "this app vs. that app" posts that iA Writer for iOS is a worth buy. I decided to try purchasing iA Writer for iOS. 
+
+The iOS version of iA Writer has all the great features of its Mac version. It has some quirks though. It  doesn't have built in support to bookmark or scrape website contents (Bear has it), the keyboard shortcut for iPadOS lacks feature to focus on editor. The solution for the first problem is to use Apple's Shortcut. For the second problem, I have to tap the iPad screen each time I opened the menu, inconvenient for keyboard person like me.
+
+## Conclusion
+
+![iA writer for iPadOS, portrait mode](ia-writer-portrait.jpg)
+
+In the end, I prefer iA Writer to iVim and Bear. I like the preview mode, I like the syntax highlighting, I like when I succeed scripting the shortcut to bookmark or scrape website.
+
+I don't like the lack of good keyboard shortcut and no modal editing, but the good side overcome the bad side easily.
diff --git a/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ivim.jpg b/content/posts/In Search of Good Writing App - Part 2, iA Writer vs iVim/ivim.jpg
Binary files differ.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -0,0 +1,30 @@
+{{ $filename := .Destination | safeURL }}
+{{ $original := .Page.Resources.GetMatch (printf "*%s" $filename) }}
+{{ $text := .Text }}
+
+{{ if eq $original nil }}
+    {{ errorf "cannot find file: %s" $filename }}
+{{ end}}
+
+{{ if ne $original.ResourceType "image" }}
+   {{ errorf "file %s is not an image" $filename }}
+{{ end }}
+
+{{ $thumb := ($original.Resize (printf "%dx %s" $original.Width "q3")).RelPermalink }}
+
+<figure>
+    <center>
+    <img
+        style="max-width: 100%; height: auto;"
+        src="{{ $thumb }}"
+        width="{{ $original.Width }}"
+        height="{{ $original.Height }}"
+        alt="{{ default $text "image" }}"
+        data-src="{{$original.RelPermalink}}"
+        class="lazy"
+    />
+    {{with $text }}
+    <figcaption>{{ . }}</figcaption>
+    {{end}}
+    </center>
+</figure>+
\ No newline at end of file
diff --git a/layouts/partials/head/head.html b/layouts/partials/head/head.html
@@ -2,8 +2,6 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-<link rel="dns-prefetch" href="//cdn.ybbond.dev" />
-
 <link data-hint="Twitter" title="Twitter" href="https://twitter.com/{{ .Site.Params.Twitter }}" rel="me" />
 <link data-hint="GitHub" title="GitHub" href="https://github.com/{{ .Site.Params.Github }}" rel="me" />
 <link data-hint="Micro.Blog" title="Micro.Blog" href="https://micro.blog/ybbond" rel="me" />
@@ -36,6 +34,7 @@
 </style>
 
 <script type="application/javascript" src="{{ .Site.BaseURL }}darkToggler.js"></script>
+<script type="application/javascript" src="{{ .Site.BaseURL }}lazyImage.js"></script>
 
 <link rel="canonical" href="{{ .Permalink }}" />
 <link rel="sitemap" href="{{ "sitemap.xml" | absURL }}" type="application/xml" />
diff --git a/static/lazyImage.js b/static/lazyImage.js
@@ -0,0 +1,17 @@
+window.addEventListener('load', function () {
+    document.querySelectorAll('img.lazy').forEach( image => {
+        if ( ! image.hasAttribute("data-src")) {
+            return;
+        }
+        const original = image.getAttribute("data-src");
+        fetch(original)
+            .then(function (response) {
+                if (response && response.status == 200){
+                    image.setAttribute("src", original)
+                }
+            })
+            .catch(function(err) {
+                console.error('lazy error: ', err);
+            });
+    }); //image
+}); //query+
\ No newline at end of file