Reading List

The most recent articles from a list of feeds I subscribe to.

My Hugo cheat sheet

Oh Hello Ana

I'm a big fan of static site generators and since last year I've been using Hugo for a lot for simple and small marketing/product websites for clients. However, I don't know Go and I struggle a bit to remember all the logic that work in the templates so... I do a lot of searching and copy pasting. I started to collect the code/logic that I use most often in websites of this kind. Basically, this page will become for me what CSS Tricks's "A complete guide to Flexbox" is for everyone!

Some of these are in the documentation of Hugo but I personally find it easier to find things with examples. In fact, almost everything I needed, I found via the community chat from Hugo.

Also, some of these things will likely seem very obvious to people who are very used to using Hugo. I am also 100% certain that there are better ways to do certain things. In my opinion, it doesn't really matter as long as the output does what we need. But I had to start somewhere, so this is the blog post I wish I had found when I first started.

PS.: there may be typos in the titles and description of the examples. Funny how these things only turn up after an article is published online! 😁

The if/else


{{ if }}
  // something
{{ else }}
  //something
{{ end }}

How to check if a value is equal to something


{{ if eq value_1 value_2 }}

How to check if a value is lower than something


{{ if lt value_1 value_2 }}

How to check if a value is greater than something


{{ if gt value_1 value_2 }}

How to combine two checks

This example checks if a value is lower than 5 and greater than 1.


{{ if and (lt $currentIndex 5) (gt $currentIndex 1) }}

How to add a class based on what page you're on

I wanted to add a specific class to a page called "Privacy policy". This page was created inside my content folder and I named its folder privacy-policy and inside it I created an _index.md. The frontmatter of the .md file has a title. Something like: title: Privacy Policy.

I want a specific class to be added when I visit this particular page.


<main class="{{ if eq .Name `Privacy Policy` }}privacy{{ end }}" id="main">
  My content
</main>

How to update aria-current in a menu

This particular example assumes we're iterating on a menu set in the config.


<nav aria-label="Main menu">
  <ul>
    {{ $currentPage := . }}
    {{ range .Site.Menus.main }}
    <li>
        <a aria-current="{{if or ($currentPage.IsMenuCurrent `main` .) ($currentPage.HasMenuCurrent `main` .)}}true{{else}}false{{end}}" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
    </li>
    {{ end }}
  </ul>
</nav>

How to only render something if there is at least one page in a section.

This example assumes we have a section called "latest" that has some posts inside it.


{{ $news := where .Site.RegularPages "Section" "latest" }} 
{{ $postCount := len $news }}
{{ if gt $postCount 0 }}
	<section>
		{{.Title}}
	</section>
{{end}}

How to only show the latest three posts of a section

This example assumes we have a section called "latest" that has some posts inside it.


{{ $news := where .Site.RegularPages "Section" "latest" }} 
<ul>
  {{ range first 3 $news }}
    <li>{{.Title}}</li>
  {{ end }}
</ul>

How to create a collection of posts that have a certain param and value

This example wants to collect all the posts inside a section that have a specific param defined in the frontmatter. For this example, let's assume that we're looking for all the posts inside a section called "latest" that have type: summary.


{{ $services := where .Site.RegularPages "Section" "latest" }} 
{{ $finalList := where $services "Params.type" "summary" }}

How to create a collection of posts that match a certain value

This example creates a variable called test that iterates over the pages inside a section called case-studies that have the value of draft as false.


{{$test := where (where .Site.RegularPages "Section" "case-studies") ".Params.draft" false }}

How to range and order by the value of a param

This example assumes that a page has order in the frontmatter and a number.


{{ $services := where .Site.RegularPages "Section" "latest" }}
{{ range $services.ByParam "order" }}
  // your content
{{ end }}

How to replace a character with something else

I had a specific situation where I had to replace "_" that could come up in a couple of words with a blank space.


{{ replace $tag "_" " "}}

How to get the content of an _index.md inside a partial

Imagine you have a partial (like a banner) and could like to bring the content of the index file of a section to it (in this case, for example an "about" page).


{{ with .Site.GetPage "/about" }}
  {{ .Content }}
{{ end }}

How to get Pages that have a value that resolves into false

This example collects all the pages inside a section that have the value "false" for draft.


  where .Pages ".Params.draft" false

How to show a list and add commas

This example attempts to re-create something like the following:

"Animals that are very chill: capybaras, tortoise, dogs."


  <div>
    <p>Animals that are very chill:

      {{ $list := (where .Site.Pages "Section" "animals") }}
      {{ $len := (len $list) }}

      {{ range where .Site.Pages "Section" "animals" }}  
        {{ range $index, $element := .Pages }}
        
        {{ $currentIndex := (add $index 1)}}

        {{ $currentLength := (sub $len 1 )}}
          {{.Title}}{{ if eq $currentIndex $currentLength }}. {{else}}, {{end}}
        {{ end }}
      {{ end }}
    </p>
  </div>

Iterate inside a section and combine options

Assuming you're adding this to the list.html of a section, this example shows how to get all the pages of a section that have the param draft as false and putting them in reverse chronological order.


{{ range ((where .Pages ".Params.draft" false).ByParam "order").Reverse  }}

I think this is it. I will update it if I remember anything else.

Big thanks to Bryan Robinson who helped me out sort out why my syntax highlight wasn't working via the JAMStack slack channel.

Other bookmarks from May and June

Oh Hello Ana

The news are quiet now and it is on purpose. There's protests happening. There's things happening. They just aren't showing it anymore. #BlackLivesMatter

I can't believe that I also have to say this but... wear a mask!

My bookmark list was getting big so here's a couple of things I've saved during May and June 2020.

Bookmarks from the last couple of months

Web development/tech related content

Others

Overthinking "likes"

Oh Hello Ana

Back in March (which feels like it was 6 months ago), I helped organise the IndieWebCamp London and one of the sessions was about analytics and the IndieWeb. At the time I blurted something without much context and I think I need to explain myself.

Analytics on this blog

Every once in a while I reactivate my analytics subscription on Netlify (and right now I am actually doing a trial of Fathom). This usually happens when I am getting unusual social media activity and I get curious/nervous to try to find out where it could be coming from. In a previous blog post, I explained that I don’t have analytics anymore because I found that they were a personal source of anxiety. Maybe not so much now, but they were some years ago and when I stopped using them, I actually felt pretty good about it and carried on.

As the wiki page for analytics in IndieWeb points out in the “criticism” section, not having analytics on a personal website has its upsides around performance and privacy. I personally don’t care what anyone does on their personal website. I don’t have any intentions of imposing my opinion and personal preference about this matter on others.

Whenever I do turn the analytics on, I found them to be super useful to find out where have I messed up: for example, when I converted my blog from Jekyll to Eleventy I deprecated my JSON feed because I couldn’t figure out how to build it (and while I was writing this, I looked up and turns out someone created it) and eventually I had data to back this up: to this date, my analytics show, on the section that tells me what resources were not found, it seems like only one person was actually calling it (i’m so sorry to that person and I will fix this!). It also helps me find out what links I have actually typed incorrectly in my bookmarks section.

I don’t like “likes” as they are

Recently, the social media platform Instagram, has announced that they would be trialing hiding the number of likes in posts. This is a response to a public outcry of how this particular social media is a source of mental health issues among our youth. This is where things get a bit tough. I want to be a “cool woman” and claim that “yeah I don’t care about likes” but that isn’t true. I am a very ordinary human with the same dopamine features as anyone else and I would be raising my hand if someone said “never have I ever deleted a funny tweet because no one liked it”. To me, it is a tiny bit embarrassing to admit this but don’t we all care a tiny little bit? Well I’ve been working on getting used to not having a reaction when I share something. Unfortunately, having this feature impact one’s self worth is more common than what we think.

Regardless of how you personally let “likes” affect you, hear me out: if we, as a society, allow ourselves to feel that “likes” or the exact lack of them, somehow define the worth of what we shared, isn’t that saying that the “like” is a metric? A very reduced way of having some sort of analytics?

And for what it is worth: I love liking people’s stuff. I hit “like” all the time! On Instagram, I always “like” what my close friends post (even if it is a photo of my least favourite dish) because I want to show them that “I see you and I care”. My mum likes every single thing I post on facebook, even if it is in English and she doesn’t understand it.

It is a feature that has layers of emotion.

In the past, I used to have in my twitter bio: “some likes are bookmarks” because I was using Twitter’s “like” feature as a bookmark. Other times I was doing a “like” to support what someone posted or a “like” because something made me laugh.

Also on Twitter, in the past I’ve restrained myself from “liking” things because I didn’t want to lose the respect of people I admire. I would stop myself from “liking” cute cat videos because I was too afraid that my interaction would appear on their feed and people would unfollow me. I know, I’m insecure.

I recently noticed that I was doing something unhelpful to my cause. When I am scrolling on TikTok, I instantly scroll through videos that don’t have a single like or only have a handful of them. My brain instantly thinks: “not a lot of likes, not worth it”. I don’t even give them a chance and that sucks.

The few times I posted on Medium or Dev.to I realised that I was constantly looking at their “claps”/”likes”. And yeah, the numbers didn’t go up so I felt silly posting there. I feel silly for admitting this here.

In a tangent and in all honesty, our tech community looks at the numbers of “likes” (or followers) to deem something or someone as worthy of other’s time. That’s how the algorithms sometimes work anyway. And maybe, just maybe, our brains may have become trained to ignore small numbers.

“Likes” in the IndieWeb

In the analytics and IndieWeb session, I shouldn’t have stirred and connected analytics and “likes” in such a loose way where I didn’t explain properly where I was coming from. My usage and view of “likes” is not the way everyone sees it and that’s okay.

I love how the IndieWeb shows us ways we can have interaction in our personal website and even ways to bring likes from silos to our website. When I learned that, I was so excited! It was one of the things that drew me to the community: an alternative. I care a lot about the IndieWeb and promoting it. I really want people to know that you can have exciting web actions on your personal website.

I also care a lot about how social media is having an impact on mental health and what I, a developer, am doing about it. I know “likes” aren’t going away and I’m not trying to push for that. Personally, I don’t think “likes” are a healthy thing at the moment so I don't think I’m going to have “likes” on my blog. I might change my mind in the future.

And the cool thing about IndieWeb and your personal website is that you’re in control of what you show and what you’re comfortable with.

May bookmarks - BLM

Oh Hello Ana

Black Lives Matter.

In today's age with today's resources there is no excuse not to educate yourself and see how we're in a racist society.

Follow the folks who talk about racial injustice. Think how the technology we're building is tracking and tracing everyone who is protesting. Learn about data regulations. Learn the tricks of the media.

Here's a couple of things I think everyone should see. However, I urge you all to please diversify the feeds you consume.

Tech bookmarks can wait another month. This is what matters.

April Bookmarks

Oh Hello Ana

I don't remember much from this last month. All I remember is trying not to be on my computer and just look at the birds that come to the garden. So this will be a very short blog post. A jotting!!!!

Bookmarks from April

Web development/tech related content

Not exactly web development related

Miscellaneous

Funny or cute or happy or uplifting content etc.