Top 2022 Blog Hits and What I Learned
Tags: writing, analytics, yearinreview, webdev
Published: 2023-01-26 15:38:44


First off, thank you for being here. I’ve been reviewing the traffic on my site for 2022 and I feel amazed and humbled. It’s been the best year for my website and for individual articles, and it’s all thanks to readers like you.

Also, I learn a LOT and I want to share!

Below are my lists of top blog posts published in 2022, top blog posts by traffic in 2022, and the insights I’ve gleaned from the data. I hope you enjoy.

## Top Blog Posts Published in 2022

### 1.  [TIL: You Can Access A User’s Camera with Just HTML](https://austingil.com/html-capture-attribute/)

![A desktop computer illustration with small windows of code open. The text on the screen says, "<HTML>" and behind the illustration is an indigo brush stroke.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/HTML-Blog-Cover.svg?quality=100&f=auto)

The HTML capture attribute is interesting because it allows you to activate a user’s camera with just HTML. This article covers it in more depth.

### 2.  [VS Code Timeline Restores Lost Work That Git Can’t](https://austingil.com/vs-code-timeline-restores-work-git-cant/)

![Command Line Blog Cover](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Command-Line-Blog-Cover.svg?quality=100&f=auto)

VS Code Timeline can take snapshots of different save points of a file. This can help you save lost work that Git may not be able to.

### 3.  [PX or REM in CSS? Just Use REM](https://austingil.com/px-or-rem-in-css/)

![A desktop computer illustration with small windows of code open. One of the windows says, "{CSS}" and behind the illustration is an indigo brush stroke.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/CSS%20Blog%20Cover.svg?quality=100&f=auto)

When choosing between pixels and rems in CSS, you should almost always use rems. It’s a simple rule to follow. This article explains why.

### 4.  [What is Edge Compute? It’s kind of like knitting dog hats](https://austingil.com/edge-compute-knitted-dog-hats/)

![Illustration of cloud over indigo brush stroke](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Cloud-Blog-Cover.svg?quality=100&f=auto)

Edge compute is the new frontier in computing technology. This article explains what it is and why it’s awesome, all along with cute pictures of dogs.

### 5.  [5 ways CSS :has() can make your HTML forms even better](https://austingil.com/css-has-with-html-forms/)

![A desktop computer illustration with small windows of code open. One of the windows says, "{CSS}" and behind the illustration is an indigo brush stroke.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/CSS%20Blog%20Cover.svg?quality=100&f=auto)

Learn how the CSS :has() pseudo-class can improve HTML forms through validation hints, conditional content, fancier designs, and more.

### 6.  [Make Beautifully Resilient Apps With Progressive Enhancement](https://austingil.com/resilient-applications-progressive-enhancement/)

![Two pelicans flying with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Opinion-Blog-Cover.svg?quality=100&f=auto)

Ignoring progressive enhancement could be seriously hurting your conversions. This article will show you how to build resilience into your apps.

### 7.  [My Experience Speaking at VueConf US 2022](https://austingil.com/vueconf-us-2022-review/)

![Vue logo with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Vue-Blog-Cover.svg?quality=100&f=auto)

This post covers my experience speaking at VueConf including the conference review, advice for speakers, and considerations for future organizers.

### 8.  [Automatically Deploy Apps to VPS with Git Triggers & Coolify](https://austingil.com/automatically-deploy-from-git/)

![Command Line Blog Cover](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Command-Line-Blog-Cover.svg?quality=100&f=auto)

This is an introduction to Coolify, a project that can deploy custom applications based on Git events. It’s similar to a self-hosted Netlify or Heroku.

### 9.  [Roll Your Own Static Site Host on VPS with Caddy Server](https://austingil.com/static-host-vps/)

![Command Line Blog Cover](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Command-Line-Blog-Cover.svg?quality=100&f=auto)

This blog post will teach you how to set up a static host on a virtual private server with Ubuntu, Caddy server, SSL, and SFTP access.

### 10.  [Vuetensils 0.10: Vue 3, Vite, Better Forms, And More](https://austingil.com/vuetensils-0-10-updated-tech-better-forms-and-more/)

![Vue logo with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Vue-Blog-Cover.svg?quality=100&f=auto)

This blog post highlights some of the best features coming to Vuetensils in version 0.10. The main focus was on forms and tabs as well as tooling.

----------

## Top Blog Posts By Traffic in 2022

In addition to the list above, these are the older posts continue to receive enough traffic to put them in the top 10 list by volume.

### [How to prevent browser refresh, URL changes, or route navigation in Vue](https://austingil.com/prevent-browser-refresh-url-changes-route-navigation-vue/)

![Vue logo with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Vue-Blog-Cover.svg?quality=100&f=auto)

Every once in awhile in Vue, you want to prevent the user from navigating away from a route or reloading the page. This post covers how to do just that.

### [How to Build HTML Forms Right: Security](https://austingil.com/how-to-build-html-forms-right-security/)

![A shield with a padlock as the emblem and an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Security-Blog-Cover-1.svg?quality=100&f=auto)

This article covers security aspects to consider when creating forms for the web. We’ll be applying security principles for the frontend, backend, DNS and more.

### [Automatically import SASS/SCSS into every Vue.js component](https://austingil.com/global-sass-vue-project/)

![Vue logo with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Vue-Blog-Cover.svg?quality=100&f=auto)

Have you ever wanted to import SCSS files into every Vue.js component automatically? This article will show you how to do so with Vue CLI 4, 3, and 2.

### [3 Ways to Prepopulate Your Vue.js Global Store’s State](https://austingil.com/3-ways-prepopulate-vue-js-global-stores-state/)

![Vue logo with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Vue-Blog-Cover.svg?quality=100&f=auto)

Sometimes you just need to pre-populate your Vue.js application store before the app loads. This article covers 3 different approaches, and their pros and cons.

### [Watching for Changes in Vue.js Component Slot Content](https://austingil.com/watching-changes-vue-js-component-slot-content/)

![Vue logo with an indigo brush stroke in the background.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/Vue-Blog-Cover.svg?quality=100&f=auto)

In this article, we cover the challenge of watching Vue.js component’s slot content for any changes, and a solution using MutationObserver.

### [OMG, SVG Favicons FTW!](https://austingil.com/svg-favicons/)

![A desktop computer illustration with small windows of code open. The text on the screen says, "" and behind the illustration is an indigo brush stroke.](https://cdn.statically.io/img/austingil.com/wp-content/uploads/HTML-Blog-Cover.svg?quality=100&f=auto)

This article explores the world of SVG favicons. We cover adding them to HTML, using emojis, inlining them as data URIs, supporting dark mode, and animations.

----------

## Blogging Insights From 2022

It’s probably hard to get any valuable information from the list above just by looking at it, so I thought I’d share some more context.

The top three posts are particularly interesting because they highlight a few valuable lessons.

### Content

My top three articles did really well across multiple platforms: HackerNews, Reddit, Newsletters, YouTube.

Here’s what I took away:

-   **Titles are important. Take time to get them right.**  The title is the first impression of any article. It’s hard to get right but I try to generate intrigue without being click-bait-y. Offer an enticing promise up front, then deliver in the article.
-   **Unusual/specific details about broadly relevant topics**  work well. The  [top post](https://austingil.com/html-capture-attribute/)  and  [the second post](https://austingil.com/vs-code-timeline-restores-work-git-cant/)  are about  [HTML](https://austingil.com/category/html)  and VS Code, respectively. Both subjects are used by a ton of developers every day, which makes these posts broadly relevant. But these posts cover in-depth and curious features most readers didn’t know about.
-   **Brevity is good**. My top post was one of my shortest. I think it did well because it said what needed to be said and that’s all. The ideal length varies across subjects, but avoiding unnecessary filler improves the quality. It also takes time to write less.
-   **Controversy is good for engagement**. I’m not a fan of deliberately controversial writing, but it was obvious to me that one reason the top article got so much attention was because the security concerns and use-cases were strongly debated.
-   **Have an opinion**. This really relates to the previous point because strong opinions invite controversy, but I think it’s worth its own call-out. There are often several ways to do the same thing, and I think a lot of folks just want the “right” way. Don’t be afraid to say what you think is right. I hate when articles start with “How to do X” then walk through ten different options and end with “So you see, there’s plenty of options to choose from”. Not helpful.

### Social media

Publishing an article is never enough if you want it to be read. It’s very important to share it as well.

My top two posts got on the first page of HackerNews which is incredibly powerful. It drives an insane amount of traffic for that day, but it has some other benefits as well.

HackerNews leads to a lot of discussion. Some people there are jerks (ignore them), some are super kind (thank them), and some are incredibly smart (discuss with them). It’s a great place to challenge your assumptions, reflect on your position, learn new things, and make edits as needed.

It also gets distributed to a lot of other places on the internet, both automatically and manually, which can lead to even more traffic and backlinks which are good for SEO.

Although HackerNews was the biggest source of traffic to individual articles, Reddit was my number one source of referral traffic across everything. It’s similar to HackerNews. If something does well, it can lead to a lot of interesting discussion and traffic. Also, there are a lot of jerks.

Traffic from Reddit isn’t nearly as explosive as a HackerNews front-pager, but it’s much easier to still get some engagement and seems to last longer. A bit more of a slow burn.

### Cross promotion

One thing I learned from my second most popular blog post was the value of cross promotion. A lot of the same lessons I mentioned above were relevant for this one, but one key traffic source was the official VS Code Twitter account retweeting it.

In my case, it was not a planned partnership, but it makes things much easier to get an audience if you can work with other people that have already established one.

In addition to VS Code being an unexpected, but welcome promotional partner, I also spend a lot of time cross-promoting my content across different writing platforms.

The best third-party platform was  [Medium](https://austingil.medium.com/)  in combination with their larger tech publications. I also publish on  [DEV.to](https://dev.to/austingil/)  and  [Hashnode](https://austingil.hashnode.dev/), but those don’t seem to have as many readers. With any third-party platform, I like to make sure my articles link back to my own website, and that the platform itself supports canonical URLs.

### SEO

Last, but not least is Search Engine Optimization (SEO).

SEO has basically ruined search engines. Searching for something like running shoes yields hundreds of results full of useless lists designed to get people to click affiliate links without actually answering the user’s question.

It sucks, but it’s also good.

Search engines accounted for about a third of my website traffic this year. It’s great that I have content I wrote a few years ago that still helps people with what they’re working on, and I think that’s the key for me.

It’s worthwhile to apply SEO “best practices” but not at the expense of the user.

Thank you so much for reading. If you liked this article, please  [share it](https://twitter.com/share?via=heyAustinGil). It's one of the best ways to support me. You can also  [sign up for my newsletter](https://austingil.com/newsletter/)  or  [follow me on Twitter](https://twitter.com/heyAustinGil)  if you want to know when new articles are published.

----------

_Originally published on  [austingil.com](https://austingil.com/top-2022-blog-hits-and-what-i-learned/)._