I had some time to myself earlier tonight, so I worked on adding a tweetable featured quote shortcode to my Hugo-generated site. That’s totally a normal thing to do on a Friday night, right? Anyway, here’s what it looks like.

There are three main components to this shortcode – the body text of the tweet, hashtags, and “Share on Twitter” link. The coolest part is the twitter.com URL, which includes text for prefilling a tweet.

So if you click on the link, you’ll see something like this.

Here’s the template code I came up with. It looks pretty messy at first glance, but it’s easy to understand after getting past all the HTML character entities.

<span>"{{ .Inner }}"{{ if .Get "hashtags" }}&nbsp;{{ range $index, $hashtags := split (.Get "hashtags") ", " }}{{ if gt $index 0 }}&nbsp;#{{ else }}#{{ end }}{{ . }}{{ end }}{{ end }}
	<br>
	<a class="share-on-twitter link-reverse" target="_blank" href="https://twitter.com/intent/tweet?original_referer={{ .Page.Permalink }}&ref_src=twsrc%5Etfw&text=&quot;{{ .Inner }}&quot;{{ if .Get "hashtags" }}&nbsp;{{ range $index, $hashtags := split (.Get "hashtags") ", " }}{{ if gt $index 0 }}{{ htmlUnescape "&nbsp;&#35;" }}{{ else }}{{ htmlUnescape "&#35;" }}{{ end }}{{ . | lower }}{{ end }}%0a%0a{{ end }}&nbsp;{{ if .Get "shortlink" }}https://brian.link/{{ .Get "shortlink" }}{{ else }}{{ .Page.Permalink }}{{ end }}&nbsp;by&nbsp;@bwhli">Share&nbsp;on&nbsp;Twitter&nbsp;&#8594;
	</a>
</span>

Here’s the shortcode I use in posts when I want to feature a quote.

{{< quote hashtags="hugo, ssg" >}}This is a tweetable featured quote on a Hugo site.{{< /quote >}}

Feel free to use the code snippet above to add a tweetable featured quote to your Hugo-generated site. If you have any questions about how the shortcode works, feel free to reach out to me on Twitter or send me an email.

HEY is a new paid email experience designed and developed by Basecamp. I say “experience” when I describe HEY because I don’t think “service” or “platform” do it justice – it’s a complete rethinking of email. HEY takes an extremely opinionated view on email with its core features including the “Imbox”, “Screener”, “Feed”, and “Paper Trail” – more on that later.

In this article, I’ll give you my initial thoughts on HEY after using it for a week. I plan on following up with a more in-depth piece in a few months, but hopefully my first impression can help you decide if you want to give HEY a try.

Continue Reading...

I made a quick update to my photo gallery today. Previously, photos were displayed top to bottom from newest to oldest. I didn’t really like that user experience for two reasons.

• As I add more images over time, older photos will get pushed further down the page. This means older photos may get less views.
• I tend to go through phases in my photography. For example, I may spend an entire month only shooting black and white. Displaying 20-30 black and white images in a row (due to the default sort order) attracts unnecessary attention and doesn’t look good.

To fix this, I decided to randomize the image order in my photo gallery.

The first method I tried involved shuffling the actual HTML structure during site generation in Hugo by adding a shuffle function into my range code.

{{ range (shuffle (where .Site.RegularPages "Type" "in" (slice "photo"))) }}

This technically works fine, but then I decided that I wanted the image order to be different for every page reload. To do this, I got rid of the shuffle function and added some JavaScript instead.

$(".photo-container").html($(".photo-container .photo-item").sort(function(){return Math.random()-.5}));

The code above randomizes the .photo-item divs in my .photo-container div. To see this solution in action, check out my photo gallery!

I recently upgraded my primary computer to the developer beta of macOS 11 Big Sur. I know what you’re thinking, but what can I say… I like to try the latest and greatest even if it means risking system stability. Also, let’s be honest – macOS Catalina wasn’t exactly the most stable version of macOS anyway.

The update to macOS 11 Big Sur went pretty smoothly. I downloaded the beta profile from my Apple developer account, and was able to get everything installed shortly after that. I was half expecting my various Python automation scripts to break, but all of them continued to work fine after the update.

The one thing that did stop working was Terminal and iTerm2. After a while, Terminal would randomly go blank and display “login 80x24” in the menu bar. The strangest part of this behavior was the fact that there weren’t any rogue login processes in the Activity Monitor, so I wasn’t sure why Terminal was getting stuck trying to login – not to mention why it logged out in the first place.

I tried a variety of fixes including rebooting, deleting Terminal preferences, rebooting again, and a few other things. In the end, the following steps worked for me to get iTerm2 working again.

In iTerm2 preferences, I changed the Command setting in the Profiles tab from “Login Shell” to “Command”. For the command, I specified /bin/zsh.

After that, I deleted com.apple.Terminal.plist in ~/Library/Preferences, and restarted my MacBook Pro. After going through this sequence of steps, I’m no longer getting the “login 80x24” issue in Terminal or iTerm2 – YMMV.

I’ve been thinking about Hong Kong a lot lately. I still can’t get over the fact that the Hong Kong I once knew and loved is gone now. Today, China passed a new national security law that extends into Hong Kong as well.

The scariest part about this new law is that it wasn’t made public before it was passed, which means Hong Kong residents don’t know much about the law’s specifics at all. The new law reportedly criminalizes offenses like secession and subversion against the Chinese government. A term like “subversion” is so vague – perhaps keeping things vague is the entire point.

Hong Kong will never be the same. Quite frankly, I have no idea when I’ll be able to go back. For now, I’ll try to share more of my old photos of Hong Kong as a reminder of the once-great country we’ve now lost.

« Instagram »