Reading List

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

Autonomy Online: A Case For The IndieWeb on Smashing Magazine

Oh Hello Ana

Last week my article for Smashing Magazine went live! I was quite nervous and anxious but... so far nobody yelled at me - which is good! It was my first ever experience writing something slightly serious and going through an editing process.

Screenshot of my article at Smashing Magazine's website

I really want to be proud of myself: I wrote something in my second language and during a pandemic. I cried a few times because I felt like I couldn't do it but I... pushed through it. I read it so many times that I hated it at some point. Other times I read it and I thought "nice one Ana". Most times, I was so anxious about misrepresenting the IndieWeb community.

I accidentally may have sparked some discussion due to a couple of things I said - especially around identity.

I didn’t realize until this point how much it made sense to have a “one true version” of yourself online

Everything I wrote was based on me, my interpretation, my experience and how I wish to express myself ✨ on the internet ✨. The community welcomes anything one chooses to represent themselves. Which is interesting to me especially because when I joined the IndieWeb community I was hiding my surname on purpose. I want to reflect a bit more on the "one true version" and read what others have written on the topic before I share how I navigate these waters.

I learned a lot throughout the editing process. Frederick O'Brien really helped me make it much nicer compared to my first draft! The posts in this blog will never be as nice and polished as that one. So don't get used to that tone. Also, for the first time in my life I was asked what is the pronunciation of my last name: it is roo-dree-guhsh (I had to look up) - so thank you Fred!

A big thank you as well to my husband, Hactar friends and friends that read it before I sent it over. And, finally, thank you to everyone who took some minutes to message me, like it or share it. I am still very anxious and I really appreciate all the kindness.

My tech-savvy privilege

Oh Hello Ana

Many of us, myself included, have made jokes about how we are our family’s tech support in an annoyed tone. I now regret those jokes. I wasn’t empathetic and I regret it.

We expect parental controls to help children navigate the internet. The funny thing is that children have been online for the same time as our parents and older generations have been. We’re very forgiving when a child orders thousands of pounds worth of fake game coins online but we’re not when it comes to the mistakes of older people. We shame them for falling into Nigerian Prince’s schemes, romance scams, virus and porn phishing emails. Catfish raised my generation and we have people our age doing stand up routines based on those scams - as if they are general knowledge. They are not.

How can I expect my parents to be tech-savvy when it was my generation (or my sister’s generation) the ones who introduced them to a computer or a phone? My parents have been “online” since 2012. I’ve been online since 2000.

I saw it all, either via direct experience or via friends telling me at school - you know… the grooming, chat roulettes, obscure forums, scams, illegal downloads, fake profiles, photoshopping, editing videos, fake emails, rumours, cyber-bullying. Only to be now trying hard to protect my parents from those things.

I have tech-savvy privilege. Plus I work in the industry. I know how many things are built hanging by thread and I’ve witnessed terrible decisions behind made for the sake of clicks.

The ageism in tech (you know, besides the sexism and racism) is also when you completely forget about a group of users. Decisions made by product and design teams have an incredibly strange consequence and end up being the but end of jokes. The “family tech support”. I must extend my understanding of the constraints here: more often than not, there isn’t the money or time to test with all the possible people who could use tech products and it won’t be people like my parents who would be in such testing groups either.

The ageism in tech is for example when your relatives call you because they can’t sign in anymore on a website (usually social media). So you try to explain to them how to find the form input fields. You ask them what they are seeing only to suddenly realise that they are on the page that creates a new account instead of sign-in. This isn’t about intellect. You’re not this superior being because you know how to sign-in on a website. Firstly, we’re probably seeing a design that is likely inaccessible due to colour contrast and hidden labels anyway and secondly is probably designed by someone who has been online for over 15 years now and we’re just used to the pattern. We, tech-savvys, are not special. We just have muscle memory.

Next, next, next, install

I’m an immigrant. I use a lot of “free” services to easily communicate with my family and friends regardless of what devices we use. A lot of people have mentioned this before, but the “rage quit social media” is a privilege. I tried it once for three months and we were miserable. The moment we don’t have the same apps to communicate, things like MMS don’t seem to work well between different operating systems of phones. They just want to communicate with me like… everyone else is communicating with everyone else. They are not going to be involved in a discussion about ethics and privacy of social media. I can’t blame them. Why would they? Why would they assume ill intentions of this medium of communication when they grew up with phones and things they could use without hidden consequences? There is no easy and cheap alternative way to communicate that works on all devices.

Privacy is a privilege - but i’m not going to start on that one right now but for example: I know that if I go to a website to buy something and if I click “confirm and pay” and nothing happens, it is probably because my ad-blocker is on and I have to turn it off.

I know about ad-blockers and I guarantee you that the majority of people don’t. The majority of people are not in dev twitter. The majority of people are on facebook and youtube and others. The majority of people don’t know about VPNs either let alone even afford them. And again, I am not superior or better than anyone else because I know about this.

No, people don’t have a choice

A while back my parents bought a new android phone. They called me and it was already set up. In that call they mentioned: “and my new email is something something”. I asked “why? What is wrong with the email I created for you?” and they explained: “at the phone shop, we asked the staff to set up our phone and it asked for email and password and I didn’t have a google account so they created a new one for me”.

When I say “to most people, Facebook is the internet” I don’t mean this in a patronising tone. I mean that when my parents bought that phone and were forced into a Google account, apps like Facebook and whatsapp were already installed. The majority of the people who didn’t grow up with the internet, especially those who don’t speak english, don’t know about browsers. To most people it is: “Look up on the internet”. And the internet is this thing and no app on their phone is called “internet”.

Speaking of which, the other day I picked up an android phone to test something in a browser and I couldn’t immediately find how to type an url… and I’m tech-savvy. I was stuck in the google dot com landing page.

Anyway... I was on “family tech support” today. A relative added a comment in the wrong photo and couldn’t figure out how to find it again and how to delete it. Admittedly, I struggled to find the page where I could see all the activity done by the person and find the correct post to even do this task and again... I'm “tech-savvy”.

When I signed in on their account I was horrified with what I saw. Their timeline was just scam ads, people selling fake goods, fake/clickbait news and there is nothing I can do to stop it and protect them from making a mistake. I can click and remove an ad as many times as I want but new ones creep in immediately after. Technically, you aren’t allowed to show the majority of these things on television but you clearly can on the “internet”. Why wouldn’t people assume that these things are regulated too?

I am not perfect. Sometimes I get annoyed with people and blurt out “how could you click in that?”, “of course that’s fake”, “just click on the button!!” and I’m not empathetic or patient. I’m just sad that we got to this point when sometimes all people want is to communicate and connect with their loved ones.

While this is just a ramble without any solution, the more I thought about this the more I tried to remove myself from “the website world” and the devices we use to be online. I started to think about the user interfaces that also have technology and that lots of people can use without as many complaints: ATMs, ticket machines, television or anything with a screen really. It’s interesting.

The internet and communication shouldn’t have a one way path with arrows pointing. And things won’t be fixed by only creating your own blog and sending your RSS feed to your parents. Things won’t be fixed either by burning all the evil websites. The problem is much deeper as it isn’t just websites: it’s operating systems, it’s protocols, it’s hardware, it’s software, it’s design, it’s internationalisation and more. It comes from meetings that only do personas of people who are in the building. It comes from copying what “bigger players” in the industry have done which we assume are the right patterns. If we raise our hands and say “look, there has to be a compromise as we can’t make things easy for everyone” then, in that case, the web isn’t for everyone.

July bookmarks

Oh Hello Ana

I've been thinking about this bookmark page especially because styling wise it is incomplete and a bit ugly and one day someone will call me out. But that isn't the only thing I've been thinking about: all those days (almost all this year) when I thought that I've done nothing for myself or my career I like to come to my bookmarks page and scroll. The work in the links that I collect here wasn't done by me, but they were learned by me and that is progress and accomplishment. All these people contributed to expanding my views and to my growth. I'm proud of my small archive.

Bookmarks from July

Web development/tech related content

Others

Tweets

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