fogrew/gurylev.com

My personal indieweb site with digital garden

Hi 👋 My name is Andrew Gurylev

• 💼  I'm currently open for new work opportunities as Senior Frontend Developer / Team lead / Middle Node.js Developer in Cyprus.
• 👴  I make websites since 2007.
• 🦾  I maintain my pet-projects on the personal GitLab instance.
• 🤩  I like walking, coffee, order, minimalism, poetry, and music.
• 🗂  I like comfortable and organized things.

More info: gurylev.com

gurylev.com's Issues

Add syndicating to mastodon

Add build step with sending post with preview to my mastodon profile

Reference

• Bridgy Fed

Replace all codepen links to self-owned code

Codepen snippets loading long, need to host code in the site project

Validate HTML

Add build step with HTML validsting by W3C

Validate a11y

Add build step to check accessibility

• axe
• something else?

Add syndicating to dev.to

Setup syndicating to dev.to

see article

Increase security headers of the site

See this report

Make the main page the overview page of all sections

Problem
Now the main page is essentially about the page.
From there you can get information about me, but not about the content that I produce.

To do
Make the main page the overview page of all sections with short about myself info.

Definition of done

• Content from the home page has been moved to the about page
• The main page contains
  • short about info with link to about page
  • the latest content from all sections

Add terms of service

• Create an email for legislative appeals
• Write documents about terms of my site, privacy policy, GDPR, CCPA, SLA, DMCA

Precache fonts

Now, when I load fonts from google fonts (see file), I see that all .woff2 font files loading only after font styles from google fonts.

There are a few problems here:

• Initializing a connection to a google style server and SSL verification takes time
• List of required font files appear only after loading the CSS file, and then download them to begin only after parsing the file styles
• Google styles for some reason add unnecessary styles and load their font files

Initializing the connection to the Google font server and SSL verification also takes time. Now, this is not visible thanks to the link preconnect tag (see commit).

I can get rid of these problems by putting the font files at the same address where the site is hosted. After that, I will also know the direct path to the font files, which will add preloading.

Thank you @Realetive for the advice!

Validate site speed

Add build step with running lighthouse with checking web health.

• speedify, (see article)
• Calibre
• SpeedCurve
• DebugBear
• Garie

Fix dates locale

Now dates on English, but the site on Russian. Ooouch!

Copy style of link hover from my previous site

I want to copy the effect of hovering over links from my previous site. The solid background below the link rises from the bottom. The effect is good because it applies to links in different places. So, you can apply it to inline links and block ones, for example, on the menu.

Add PWA

via eleventy-plugin-pwa

Add my speeches

Create new eleventy collection and put there slides and videos of my speeches.

Add AMP version

see 11ty issues

Add fluid typography

Fonts on the site are inaccessible small for TV and uncomfortably large for mobile devices. Worth adding fluid font-sizes.

Add meta tags for sharing

• Open graph
• Twitter

Add email subscription

Use nodemailer for sending emails

• on vercel lambda function for confirming subscription
• on build step for sending new posts

Add watching section 🎞

• Series
• Anime
• Movies

Add books section 📚

Add a section with read books

Split files of styles

All styles now bundled to index.css file.
But part of styles like themes, media-queries, and syntax highlighting never loading. I can split it to separate files and load them only if a media-condition is true. For example:

<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">

Add buttons for social sharing

Write article about sense of duty «How to take less»

Rename blog

Now I have strange naming. It looks like the blog is a section of the site and each post should be in blog. But now it works different: the blog is just a tag of posts. And site contains section with posts filtered by this tag. Now someone may get the feeling that posts from other sections for some reason are not displayed on the blog. According to the original idea, they shouldn't. However, this introduces a sense of error.

I believe it would be more correct to rename the blog to resolve this misunderstanding. But I have no idea what name can summarize everything that I plan to post there. Therefore, it might be worth rebuilding this section.

Increase dependencies with MIT license

See this report

To do
At least!

• Replace unlicensed markdown-it-anchor
• Replace eleventy-plugin-nesting-toc without license file (but with ISC in package.json)

Validate feeds

Add build step with feeds validating

• Is it XML?
• Is it an RSS feed? (RSS 2.0 specification)

Add microformats

Add microformats to

• posts feed (h-feed)
• each post (h-entry)
• home page (h-card)

Add summary and picture for tags

DoD

• tags pages have image and description in meta-tags (don't remind about open graph #42 )
• if a article page does not have its own picture, the picture of the main tag should be displayed in a articles lists

// the main tag is the one in which the articles are listed
// for example, on the code page it is a projects for first list and snippets for second list

Pull request
see #44

Write article about wish → thing → reward

Validate performance budgets

Add build step with validating performance budgets

Reference

• Performance budgets 101
• Start Performance Budgeting
• Lighthouse budgets.json
• Lighthouse-ci
• Lighthouse-ci github action
• Lighthouse-ci with Vercel
• Lighthouse-ci integration example

Write article about motivation

Add english version of the site

• Translate to English
  • pages
  • layouts
  • dates
• Migrate Russian version to /ru/
• Think about the consistency of RSS-feed!
• Take care about localizing of subtitles

Fonts went on a linux

Screenshot from Debian

Add syndicating to telegram channel

Add build step with using telegram api to sending post with preview to my telegram channel

Validate SEO tags

Add build step to validate specific HTML markup

• microformats: h-feeds, h-entries, h-cards
• open graph
• alternates/canonicals

Add webmentions

I love the idea of controlling my content on the Internet, so I like the idea of webmentions as a link between sites.

Refs:

• Static Indieweb pt2: Using Webmentions
• eleventy-webmentions based on eleventy-base-blog
• Discuss about this feature in 11ty
• Example

Make folders for posts

For posts not enough once markdown file, because each post can contain any images, translates, and snippets.

Write article about mindful using social sharing buttons

Add info about me in infosec world

At least public GPG key and keybase profile

Enlarge hero text in articles

Write article about learning on work

Write article about procrastination

Copy my old projects

Copy my old projects from my previous site. Web-achive link

Check and fix a11y

• Add styles for focus state of every actionable element
• Add "go-to content" hidden link
• Check and fix everywhere contrast ratio
• Change aria-attributes for states (theme-switcher, ...)
• Use semantic tags
• Check the site in High contrast mode

Check via axe
Add linter

Add reading time

Rewrite this lib for multi language usage

Add "listen now" block

Add live-status for of my last.fm account