DEV Community: Jibran Kalia

Chrome Omnibox

Jibran Kalia — Sun, 20 Jun 2021 15:27:14 +0000

I use the browser’s address bar several times a day but I never thought deeply about its design. It is after all a simple text input bar. But is it that simple?

Google Chrome calls it the omnibox. And it is designed with a specific UX philosophy: reduce cognitive overhead. In other words, reduce the number of decisions needed to be made to go to a certain page.

The primary outcome of this philosophy is combining the search and address bar. In the past, these two boxes were separated.

However, by combining them it's one less decision a user has to make. Omnibox's entire goal is to bounce the user to their destination as soon as possible similar to a Google search page.

As an aside, reducing decision-making is one-way apps are made more addictive. For example, paginations buttons at the end of a page are changed to infinite scrolling so there is no discreet stopping point and a conscious decision to go to the next page is not necessary.

Source: https://www.chromium.org/user-experience/omnibox

Vim tip for Quiver

Jibran Kalia — Sun, 05 Apr 2020 16:19:41 +0000

Navigating wrapped lines using Vim

I was finding myself struggling to navigate between long wrapped lines in Quiver using Vim’s j and k commands. Text, as opposed to code, can have long physical lines. I could break them up by add a line break after every period but that feels strange. While perusing the Quiver wiki I landed on the Vim section. There was my answer:

Quiver has line wrapping turned on by default (src). To get j and k working normally, either use :set nowrap or :map j gj and :map k gk.

I applied the keymap and it worked beautifully. I also learned about Vim’s gj option for the first time. Here is the documenation if you are interested.

AppleScript

The next problem was that the map commands were not being persisted. At every restart, I would have to retype :map j gj and :map k gk. The docs came in handy again and pointed me to this applescript. The script would programmatically open Quiver and type in those commands. I modified the script to my preferences. Gave it the correct access permissions for an executable via chmod 755 Quiver.sh and ran it.

Accessability Permissions

I got the following error:execution error: System Events got an error: osascript is not allowed to send keystrokes. (1002).

Turns out my Script Editor didn’t have enough permissions. So I went under System Preferences > Security & Privacy > Privacy > Accessibility and checked the box.

However, I wasn’t done yet. I ran ./Quiver.sh again and got the same permission error. After some research, I realized I needed to give iTerm those same permissions. This is because I was using iTerm to run the script. I gave it those permissions and it worked without errors. However, Quiver’s vim mode started acting weird. Turns out I needed to (programmatically) press Return between the two map calls. I modified my script to add keystroke return between the two map calls and it worked.

Here is the full applescript:

tell application "Quiver" 
    activate
end tell

tell application "System Events"
    -- jump to the correct location (split mode pane)
    keystroke tab
    keystroke tab

    -- if we were already in the cell, jump back
    key down {shift}
    keystroke tab
    keystroke tab
    key up {shift}
    delay 0.01

    -- remap vim
    keystroke ":map j gj"
    keystroke return
    keystroke ":map k gk"
    keystroke return
end tell

Handy Alias

The last step was to add an alias so I don’t have to remember the full file path to the script. I added this to my .zshrc:

# Quiver
alias quiver='/Users/jibrankalia/dotfiles/quiver/Quiver.sh'

I then ran source ~/.zshrc so that my current shell picked up the changes. I then typed quiver to the shell and voila everything worked.

Thank you for reading.

Credit to Vincent Yang for the original script.

Note taking in Quiver

Jibran Kalia — Sat, 04 Apr 2020 15:34:24 +0000

I recently started using Quiver to do my normal note-taking. I had already tried a whole gamut of other apps including Evernote, Notion, and Boostnote. I never really got comfortable using Evernote, to be honest. It never went beyond scribbling a note here, a thought there.

Notion

I used Notion for a while and I tried to make it work for me. However, the biggest downside was that the Mac and iPhone app just didn’t feel that snappy. It just felt that it was a few milliseconds too slow. To be fair, I was expecting it to boot at the speed of the native Notes app in Mac or iPhone which is not a reasonable comparision. Notion is amazing and provides a groundbreaking approach to taking notes. Furthermore, with the upcoming API support, it could even act as a Headless CMS for this blog. Alas, I couldn’t wait that long.

Boostnote

Boostnote came very close. I liked Boostnote 1.0 because it had great Vim key binding support. However, with Boostnote 2.0 they introduced pouchdb as the main data store. Previously, the filesystem was being used to store the files. They have good reasons for switching as explained in this issue:

We’ve learned using the file system is quite dangerous while maintaining the current Boostnote project. Most of the problems are caused by the differences between OSs.

However, I share the sentiment of one commenter in that I preferred files being saved transparently to the filesystem where I can sync them to Dropbox/Google Drive. Boostnote 2.0 provides a cloud syncing functionality but I much rather use iCloud.

Quiver

In the search to get another editor that would fulfill my requirements, I stumbled across Quiver. It sounded very promising as it markets itself as The Programmer's Notebook. Turns out it was a perfect fit me. Firstly, it feels very snappy as an app. It has decent Vim key binding support. It saves files directly to the filesystem using its data format. This allows me to sync using iCloud / Dropbox. Furthermore, there are tons of export scripts available in addition to the great native export options. Plus the format is very reasonable to work with so if necessary I can always wire up a custom export script. And it seems like at least one other person agrees with me:

Here’s Quiver’s Data-Format. It’s … really good. Like, really good.

Finally, because it is a Mac-only app it doesn’t need to worry about the cross-filesystem syncing issues Boostnote had to manage.

There are some cons with Quiver. It is a little more complex than I need. For example, it has 5 different cells:

- Text Cell with a full WYSIWIG editor
- Markdown Cell normal markdown with Vim binding support
- Code Cell that uses ACME
- Latex Cell
- Diagram Cell

I only use the markdown block (I tend to put my code samples in the markdown block) so I don’t need all the other blocks. Thankfully, Quiver has the option to set the default cell type which I quickly set as Markdown. Though I do plan to explore the Diagram cell further in the future.

Furthermore, there is some cool theming support. After trying a few custom ones I settled on the official spacegray theme. Doesn’t this interface look beautiful:

Yup. I am a fan. Thank you for reading.

TLA Plus

Jibran Kalia — Tue, 25 Dec 2018 06:00:00 +0000

I just read an incredible paper written by engineers at AWS: Use of Formal Methods at Amazon Web Services

I find complex distributed systems fascinating. Reading about the use of mathematics to verify the correctness of distributed systems was very eye-opening.

Some highlights from the paper:

So far we have used TLA+ on 10 large complex real-world systems. In every case, TLA+ has added significant value, either finding subtle bugs that we are sure we would not have found by other means, or giving us enough understanding and confidence to make aggressive performance optimizations without sacrificing correctness.

This was a very subtle bug; the shortest error trace exhibiting the bug contained 35 high-level steps.

That spec did not uncover any bugs but did uncover several important ambiguities in the documentation for the algorithm, which the spec helped to resolve

I would also recommend checking out The TLA Home Page

SASS Ampersands

Jibran Kalia — Tue, 18 Dec 2018 06:00:00 +0000

One of the many reasons I love working at Scalefactor is that I get to work extensively both in the front-end and the back-end. That being said at the moment, the back-end is my stronger suit. That is why you might see a lot more front-end related posts here as I try to level up in that area. Going back to SASS. Here is something small I learned today. Borrowing the explanation below from CSS-Tricks.

Here is a simple nesting example that works in SASS:

.parent {
  .child {}
}

Which is compiled to in css:

.parent .child {}

What about when we use an &

.first-parent {
  &.second-parent {}
}

Which is compiled to in css:

.first-parent.second-parent {}

The difference between the two is that in the second example we are selecting an element that has both classes: first-parent and second parent.

I like to think of & as copying the parent selector and pasting it next to the child selector. This gets interesting when used along with BEM CSS Methodology— Block Element Modifier. More on that later.

There are a lot more uses of & in sass. This article in CSS-Tricks does an amazing job explaining everything.

Thank you for reading!