© 2020 Pyotek
This site has amplified superpowers.

Pyotek Reboots

What is this Pyotek, anyways?

For now, it is a Tech-Blog that respects your privacy with a strong focus on Software and Hardware projects. On the other hand, it is also a GitHub organization/collective (yeah, currently a one-man show) that works on Open Source projects.

Follow Pyotek on its journey!

Oh hey, we have a fresh new Β Instagram account now, too - check it out!

Technical

This site is built via Hugo a fantastic static site generator that utilizes Go‘s template mechanism and is therewith pretty fast. Static means that the HTML delivered by the server will always be the same for every person. There are no dynamic server-side changes.

That is the reason why we are able to host on GitHub pages which - put in simple words - serves repository files without ever making any changes to them.

The Past

Before, we used a customized (in the sense of manually stripped-down) version of the now deprecated Hyde-X theme. This theme was based on Hyde, a very popular theme for another static site generator named Jekyll (fitting, eh?).

Though very inactive, this blog worked pretty well for about 2 years - but it was neither very responsive on smaller screens nor SEO-optimized. With newer Hugo major releases, there also came up incompatibility problems and errors regarding the theme’s layout files.

Therefore, we decided to do a full migration of the theme.

The State of the Art

We rewrote most of Hyde-X‘s templates, changed about half of the CSS and adapted to the freshest Hugo features (Hugo Pipes, anyone?). We tested and tested… And we made it lightning-fast ⚑ - by limiting to just a few HTTP requests and only using the relevant styles for the current page.

Oh and we implemented another major breaking change: We made it fully AMP-conform.

Let’s AMPify!

So what is AMP? This is how the project is advertised on amp.dev:

AMP is an open-source HTML framework that provides a straightforward way to create web pages that are fast, smooth-loading and prioritize the user-experience above all else.

To support that, AMP uses several clever modern web development concepts (read how AMP works). It has to be said that most website developers use AMP for primarily one single reason consisting of three letters: SEO. But why?

Dark Sides

Well, AMP is a project introduced by Google. At least on mobile, your AMP site evidently ranks better than your regular one.

There have been more than one critical voices about it. Primarily, this is because people fear that the web gets centralized more and more around the search giant.

To be honest, we can agree to some of the critical points. Google prioritizes AMP content. By doing so, the big πŸ™ Google could potentially get even more control over the web.

Furthermore, some people would say that a company which makes not just a few dollars with personalized ads conceptually cannot exactly respect your privacy.

So which evil spirit moved us to use this particular web technology?

Bright Sides

We have to admit that there are some really good things about AMP. Like often, there is no clear “good” πŸ‘Ό or “bad” 😈.

Well. First, AMP’s source code can fully be reviewed. Everyone can verify that there is no user tracking involved unless the web page author actively decides to do that (e.g. via analytics). Secondly, Google has no intention to use AMP’s JS components itself for spying purposes. That is simply not the aim of the project.

For completeness, it has to be mentioned here that Google’s AMP cache is subject to its privacy policy, which means that Google can collect data if you use the cache (i.e. by visiting the page from Google’s search results - but then you already agreed to the policy anyways).

We like performance-tuned code and this is exactly where we see AMPs strengths:

While it can be a complex (or even impossible?) task to migrate existing pages with a lot of JS, quickly prototyping a whole fresh website is a relatively easy task.

If there is not much JS to take care of, it’s also pretty doable - as done for this page:

How we did it

We started with the official documentation and followed the tutorial “Convert HTML to AMP". It is pretty easy. Until you enable the nasty #development=1 flag and see all the shiny red validator errors in the JS console.

At first these errors felt overwhelming. But don’t be too afraid. We fixed them piece for piece - and it was a great feeling to finally see the result:

Yes, AMP validation successful!

Porting a page from regular HTML to AMP-conform HTML is a very individual task, but AMP’s documentation is supportive. It always seemed to be up-to-date and we only ran over some smaller typos/mistakes.

How we respect your Privacy

While the AMPification we always had two things in mind: What is if people want to stay away from the biggest search giant as much as possible but still want to use this site? What is with people who do not want to use JavaScript on an unknown new blog with a big nerdy lime P?

Our solution: We made sure that you can still access most of the content without using JavaScript. This also results into fewer HTTP requests (smaller attack surface):

See how the v0.js request is blocked?

Additionally, we currently do not have any plans of integrating analytics, ads or any other form of user tracking. First, we want to at least try to stay a complete donation-based blog.

The Future

Here’s what’s currently on our blog theme’s roadmap:

  1. Mobile: Auto-hide top bar when scrolling
  2. Mobile: Implement an actual sidebar
  3. Mobile: Improve offline usage
  4. Add user configuration using PWA mechanisms
  5. Refactor and improve theme
If there is enough interest, we might decide to generalize this theme and give it back to the awesome Hugo community. Let us know!

Let’s see what the future will bring.