I want to remember how and why this blog started. I hope it can inspire you as well.

Why? #

I'm a long time reader of the Cal Newport blog. One of the ideas that he talks about is owning your data.

• Beyond #DeleteFacebook: More Thoughts on Embracing the Social Internet Over Social Media
• Is YouTube Fundamental or Trivial?

And he mentioned IndieWeb a couple of times.

What is the IndieWeb? #

The IndieWeb is a people-focused alternative to the "corporate web".

Getting the domain #

The first step to own domain is, of course, figuring out a name. I've struggled with it for a long time. I have to thank Farnam Street fs.blog for inspiration.
Fortunately, kula.blog was available!

Building the blog #

I thought about using CMS like Ghost but in the end, I decided to give 11ty a try. Mateusz Kwaśniewski used it for kwasniew.com and was encouraging everyone to try it.

Most of it was copy pasted from 11ty/eleventy-base-blog

Hosting #

I'm using Netlify. It's UX is great. Integrates with Github and Let's Encrypt. It's great. :)

Tweaking #

The most important change was changing the default font to native ones:

Taken from: The New System Font Stack?

I like how it looks and there is no web font to load :)

html, body {
  font-family: -apple-system, 
               BlinkMacSystemFont, 
               "Segoe UI", 
               Roboto, 
               Oxygen,
               Ubuntu,
               Cantarell,
               "Fira Sans",
               "Droid Sans",
               "Helvetica Neue", 
               sans-serif;
}

More changes to come #

I don't want to rush UI changes. I am going to tweak and fix bugs. Most of the work I want to put into the articles.

Github styles #

updated 20 March 2019

Inspired by kwasniew.com I'm trying out sindresorhus/github-markdown-css and disabling code highlighting.

Favicon #

Made with xiconeditor.com inspired by my old one at krzychukula.github.io

Code Highlighting #

Only in CSS! Generated at prismjs.com

Update 2020.01 #

Added support for the user-preferred color scheme based. It's really easy if you use CSS variables.

:root {
  --background: #fff;
  --text: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: rgb(0, 0, 0);
    --text: rgb(196, 196, 196);
  }
}

html,
body {
  color: var(--text);
  background-color: var(--background);
}

Update 2020.03 #

1. Added smooth scrolling to anchors (when you click on the # sign next to the headers)

html{ scroll-behavior:smooth; }

2. Added sharing buttons from sharingbuttons.io

Update 2020.05.15 #

Added footnotes #

markdown-it-footnote

Switched the page to use rem units #

html {
  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
  font-size: 1.6rem;
}

But stored them into variables:

:root {
  --size_s: 1rem; /* 10px */
  --size_m: 1.6rem;
  --size_l: 2.2rem;
  --size_xl: 2.8rem;
  --size_xxl: 3.4rem;
  --size_xxxl: 4.5rem;
}

/* usage */
h1 {
  font-size: var(--size_xxl);
}
h2 {
  font-size: var(--size_xl);
}

Added last modification date #

I'm not sure why I couldn't use nice keywords for modified like mentioned in 11ty date docs but just putting it by hand works just fine and will be more reliable in opinion.

date: 2019-03-19
modified: 2020-05-15

After looking at the feed.xml I'm not sure if date isn't intended for it:

<updated></updated>

I'll think if it's worth addressing.

Feedback or Comments?

← Home

Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.