AirPods are awesome, and are also a failed product from Apple.

And I fell for it, as many, many others:

• iphonehacks.com
• discussions.apple.com 1
• discussions.apple.com 2
• iphonetricks.org
• annoying.technology
• reddit.com
• macrumors.com
• reddit.com
• newsbreak.com
• ipadinsight.com
• twitter.com

The plot goes like this.

A little AirPods story

You are stoked to have received your fresh AirPods in your mail.

You use them regularly and have a pretty good experience.

One day though, after months of usage, you get a rattling noise in one of your AirPods.

You don't understand where the issue lies, since you never dropped them and you know you handled them with cure (since it's a premium product, not so sure about that..)

You become a detective, and comb through all 1000+ issues related to "AirPods rattling".

"There is a fix!" - simply return the faulty AirPod to Apple and get a replacement.

You put out 99$ (more or less) and get them refunded when your faulty pair returns to their facility.

---

Not so fast

Now you say, "well that went smooth, a bit annoying but I have my functioning AirPods again".

Time passes and your AirPods seem to work well. A month goes by and you almost forgot about that annoying rattling sound.

But.

The rattling noise comes back and hits you, in the ear. Sucker punch style.

It's on the other AirPod though.

You think about your past replacement experience and really don't want to go through this another time.

But what do you do? You don't have many alternatives.

Except to learn from your mistakes

All's well that ends well

Nah. It's not "well".

You put out 250$ to have a "temporarily working" product that you regularly need to replace (one airpod at a time).

That's not ok, sorry Apple.

Timeline

• Purchased on beginning of April (April 9th 2020)
• First "rattling" experience in June (June 4th 2020)
• Contact support and order replacement (June 8th 2020)
• Receive replacement (June 12th 2020)
• Confirmation from Apple to have received the faulty part + reimbursement (June 15th 2020)
• Second "rattling" experience in July (July 20th 2020)
• ...

Struggling with dozens of newsletters in your inbox? (or should I say "Imbox"? </troll>)

I use this super simple organizational trick / habit when signing up for newsletters.

---

Using an email alias

When I sign up to newsletters I always use the following email pattern:

[username][email protected]

Can't remember if this was GMail-only or not, nevertheless it works with protonmail too for example.

Newsletter emails should be silent

Newsletters can be read with calm, a day / a week later and can still provide the same value.

I prefer to get notifications only for important things, and newsletter certainly don't fall into that category.

So, I set up a filter on protonmail

This filter takes every email with the before mentioned pattern ([username][email protected]) and puts it in the folder "News".

This is how the filter looks like:

The folder "News" is programmed to never send me a notification for incoming emails:

---

This is how I reduce the newsletter-stress I was perceiving.

I am interested to know if you are experiencing a similar fatigue.

Let me know @christian_fei

To be found, you need to describe yourself well to computers

SEO is as important as a good mailing-list to reach your (potential) audience.

Over the past 10 years, I've made some mistakes and also took home some knowledge about SEO for blogs and websites and landing pages.

Below I've compiled a list of techniques and code-snippets that I personally use (hint: view-source) to improve for organic website traffic and SEO.

To make your content more enjoyable by users (social media sharing, RSS, search results) and descriptive to machines (SEO).

Read more techniques in the book:

Get "20 Techniques to improve SEO"

Table of contents

Read all about it in the ebook format

• The head tag
  • HTML5 (of course)
  • Open Graph protocol
  • utf-8
  • the title tag
  • meta tag "description"
  • feed the robots
  • canonical url
  • DNS preconnect
  • Google Site Verification
  • RSS
  • Responsive tags and others
  • Web App meta tags
  • meta tag "author"
  • meta tag "keywords"
  • Icons
  • schema.org data
  • Inline CSS and PageSpeed score
  • Social Media Fluff
  • Twitter meta tags
  • Open Graph and Facebook
• Schema.org meta data for articles
• Google WebMasters & Google search console

Read more techniques in the book:

Get "20 Techniques to improve SEO"

The head tag

HTML5 (of course)

enable it by starting your document with <!DOCTYPE html>

Open Graph protocol

to your <html> attach the attribute prefix="og:http://ogp.me/ns#" to announce that you're going to specify Open Graph metadata (e.g. og:title, og:type etc)

utf-8

specifies the document's character encoding

<meta charset="utf-8">

the title tag

add a descriptive title to your web pages. for consistency, I add - News from Chris

<title>... - News from Chris</title>

Read more techniques in the book:

Get "20 Techniques to improve SEO"

meta tag "description"

define a description for the page.

It could be an excerpt of the blog post.

Or a default description like this one

<meta name="description" content="A blog about agile, programming, clean code, testing, javascript">

Whatever describes concisely why this web page exists.

feed the robots

helps your website to be crawled by robots

<meta name="robots" content="index,follow,max-video-preview:-1,max-snippet:-1,max-image-preview:large, max-video-preview:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />

DNS preconnect

"Pre-heat" a connection to a host.

For example if you have a script or stylesheet loaded from a CDN or images from unsplash.com:

<link rel="preconnect" href="https://images.unsplash.com">

Google Site Verification

Verify your site ownership and get access to Google Search data and Google WebMaster Tools.

<meta name="google-site-verification" content="..." />

Responsive tags and others

Tell the browser how to scale and handle your content:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

meta tag "author"

describe the author of this document

<meta name="author" content="Christian Fei">

meta tag "keywords"

I think I read somewhere that spiders ignore this tag completely or give it very little relevance, due to its abusive past.

It doesn't hurt if you include it:

<meta name="keywords" content="Christian Fei,developer,programming,javascript,full-stack" />

Read more techniques in the book:

Get "20 Techniques to improve SEO"

Learn about topics like

• canonical url

• RSS

• Icons

• schema.org data

• Inline CSS and PageSpeed score

• manifest.json aka Web App Manifest

• Web App meta tags

Social Media Fluff

Twitter meta tags

define stuff like your handle, who wrote this piece, the preview size on twitter etc

<meta name="twitter:site" content="@christian_fei">
<meta name="twitter:domain" content="cri.dev">
<meta name="twitter:creator" content="@christian_fei">
<meta name="twitter:card" content="summary">
... read more in the ebook

Open Graph and Facebook

Using the og: meta tags you define in the same way the content as above essentially, using different tags..

<meta property="og:locale" content="en_US" />
<meta property="og:title" content="..." />
... read more in the ebook

Read more techniques in the book:

Get "20 Techniques to improve SEO"

More in the book about:

• Schema.org meta data for articles

• Google WebMasters & Google search console

---

These are all the tricks I have to share!

I have compiled all of them in a ebook format

I hope you found it useful and managed to see some improvements with the SEO of your site.

Let's stay in touch: @christian_fei

After using Brave for almost a year, I can extract some stats from its usage over time:

• 152,906 trackers blocked
• 2,26GB of bandwidth saved
• "2,1 hours saved" (no clue how this is calculated)

But more importantly, I made some bucks!

In Brave browser you can opt-in to the Brave Rewards program, which enables a BAT (Basic Attention Token) Wallet where the funds will be stored.

Through the third-party service uphold.com you can manage those funds and withdraw them.

---

I can't say that the ads were very relevant all the time, but certainly more accurate to my interests than other ads showed on the Web.

Nevertheless, in the last year I managed to gather 13,5 $ (11,5 €)!

Not too bad. I didn't expect much from BAT and Brave Rewards, but it's still something.

Still better than the shady crypto faucets 😄

To learn more about Brave Rewards, visit brave.com/brave-rewards/

---

Are you using Brave?

Did you get something out of the Brave Rewards program?

Let me know on Twitter @christian_fei

Do you want to know how users make use of your site? Which links they click most and what converts most?

From the official documentation you can trigger custom events via JS, by including a small utility function plausible:

<script>
window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
</script>

Whenever you call plausible('...event...') you put a tracking event in a queue (window.plausible.q) and will be tracked.

Track all the things

Some ideas of what you could track:

• is the CTA effective? Do people click on "Learn Testing"
• do people use the navigation links in the header?
• do users click on the featured posts after reading the article?
• do people subscribe to the mailinglist after reaching the /subscribe/ page?

it all depends on the elements on your site and what matters most to you.

Dynamic tracking via data attributes

Data attributes can be used to "mark" elements in your HTML with events you want to track.

E.g. data-track could be the name we choose to mark elements (specifically a elements):

<a href="..." data-track="Clicked some-link">some link</a>

You simply specify the event name you want to track ("Clicked some-link") and add to the <a> event tracking functionality.

---

Then, in the JavaScript counterpart, you query for all elements having a data-track attribute:

;[...document.querySelectorAll('[data-track]')].forEach(trackAction)

trackAction does the following, given a DOM element:

• it registers an event listener for the "click" event
• when that happens, the value of the data-track attribute is taken
• put the value of data-track in the localStorage

LocalStorage is needed because the event would be tracked, because the request would be aborted due to the click on a link.

Thus we swiftly put it in the localStorage, so that on the next page load (after the navigation finishes), the event can be tracked

function trackAction ($el) {
  if ($el.nodeName === 'A') {
    $el.addEventListener('click', function (e) {
      window.localStorage.setItem(e.getAttribute('data-track'), 1)
    })
  }
}

This is where the localStorage is read and every entry in localStorage is tracked as an event.

Then the entry is removed from localStorage.

Object.keys(window.localStorage).forEach(key => {
  if (/^Clicked/gi.test(key)) {
    window.plausible && window.plausible(key)
    window.localStorage.removeItem(key)
  }
})

Set up "Goal conversions" on Plausible analytics

Go to your property settings, under "Goal conversions" click "Add goal" and set it up in the form Clicked {name}:

Here some examples of tracked goals.