
![Taking Inventory](/images/makerlog/001-taking-inventory.jpeg)

_New year, new intentions._

With the beginning of the new year. I'd like to set myself some new intentions. One of them is to sort through my graveyard of unfinished and abandoned projects and actually finish a few. But let's start with one.

For January, I will focus on setting up systems and cataloging everything I already have created in the past.

One of the things I want to do is post a weekly update, here in my maker log. Both for me to look back on and to keep myself publicly accountable.

This week I focused on setting up a new workflow in Notion. Made an overview of all the projects I have and added analytics to them. So I can see if any of the landing pages already have any traffic. I’ll also create a small form in Google Forms to see if people actually click through. Maybe they will leave some useful feedback?

For Analytics I chose [Plausible.io](http://plausible.io?ref=robindeneef.com), they are privacy friendly analytics tool. They are lightweight and open-source. I also liked their interface. I’ve configured Plausible to send me a mail every month for every domain. I will need to find a way to track these numbers over the year.

That’s it for week one of 2022. I have a GCP Security Engineer exam coming up at the end of the month. So I don’t think I will be able to spend a lot of time on side projects. But I will be able to write some content for [GCPSecured.com](http://GCPSecured.com?ref=robindeneef.com)


#1 - Taking Inventory


![Taking Inventory](/images/makerlog/002-sideproject-cemetery.png)

This week I spend my time trying to map all the things I already have. I went over all the domain names I own, wrote a little write up about the idea and why I hadn’t worked on it. I added [Plausible Analytics](https://plausible.io?ref=robindeneef.com) to all of the domains that actually have something hosted. Did some updates on my older projects to update all the packages to the latest versions and wrote this little post.

## Domain Names

### CloudPurse

🌐 [CloudPurse.io](http://CloudPurse.io)

A project I started in 2021. I wanted to build a tool that tracks your GCP spend on projects and can automatically trigger action based on the amount you are spending. For example, send you an email when you’re budget reaches 1,000 dollars, or to shut down your development environment if your budget goes too high.

Unfortunately, Google’s Cloud Billing API doesn’t support getting your current GCP spend for a project at the moment. It is possible for the client to set up a sink to BigQuery and that I can query it, but it feels like a cumbersome process for my users. And I can only get an update every day. In a day a lot can happen if you’re app suddenly goes viral or is under attack. I feel like CloudPurse can’t do what it promises with such a delay. That’s why I halted it for now.

### Fullstack Almanack

🌐 [fullstackalmanack.com](http://fullstackalmanack.com)

I got the idea to start a tech blog and write some how-to articles on how I do certain things. More for myself than for anyone else but it’s a good way to build some extra credibility.

### GCPSecured

🌐 GCPSecured[.com](http://RobinDeNeef.com)

A website I made during a Twitch Stream over a weekend. At work, I’m constantly working with Google Cloud Platform. I wanted to create a learning resource about everything GCP Security. I’m adding articles to it as I go. I’m currently also studying for the Professional Cloud Security Engineer Certification. I’m mainly working on this site to build credibility in this domain. [I also created a Google Form to gather feedback.](https://forms.gle/iqw1pm34HF9MQ91C7)

### Generic Excuse

🌐 [genericexcuse.com](http://genericexcuse.com)

This is one of the oldest domains on the list and it has quite a funny backstory. During my college days, a friend cancelled on me very last minute with a vague excuse. I did what every person would do and opened a bottle of Jameson whiskey and wrote an API that allows you to get different excuses for different occasions. Finished the whole project that night. Afterwards, I used this project to make a Slack Integration and [a Telegram chatbot](https://fullstackalmanac.com/post/2020-10/write-a-telegram-bot-with-python-flask/).

### Grabelton

🌐 [grabelton.com](http://grabelton.com)

Can you call a person really your friend if you didn’t, at some point, wanted to start a business together? This domain comes from one of those moments. I’m holding onto it because what hasn’t happened yet can still come.

### RobinDeNeef

🌐 [RobinDeNeef.com](http://RobinDeNeef.com)

The site you are currently on. My own little cosy corner of the internet. Here you can follow my adventures and read some notes I’ve made along the way.

### SobrinoStudios

🌐 [sobrinostudios.com](http://sobrinostudios.com)

I bought this domain since it’s the name of my Freelance Business. I haven’t really made a good looking website for it yet. But I want to put up a portfolio here in the near future.

### Software Scrolls

🌐 [SoftwareScrolls.com](http://SoftwareScrolls.com)

I bought this domain at the same time as FullstackAlmanack, I couldn’t decide on which one to take for a technical blog so I bought both. Ultimately I went with [FullstackAlmanack.com](http://FullstackAlmanack.com) but I still keep this one. I feel like it would be a good one to host some courses or something else.

### Spreadshop

🌐 [UseSpreadshop.com](http://UseSpreadshop.com)

A project I started in the summer of 2020. The corona epidemic saw an increase in eCommerce and I heard from friends and family that there was an increase in demand to set up Shopify stores. I wanted to lower the barrier even more. So that people didn’t even have to look for help setting up a webshop.

To lower the entry I wanted to use a technology where most people are familiar with, spreadsheets, and use it to generate a web store from a template, with some customization options. This could then also become a funnel for freelance work if clients wanted to have custom designs.

Most of it did get finished. One thing the whole project got stuck on was images. The V3 API of Google Sheets had no support to retrieve images out of spreadsheets. At this point, I would have had to create a form or something else to handle image upload and it felt more that I was cloning Shopify. The new V4 API does support images. So I think this idea is actually quite viable again.

### Virtual Room

🌐 [vroom.rocks](http://vroom.rocks)

I made this website as a pitch for a project to do over the holidays. We were all locked down and it felt like a cool idea to bring people together. And I think VR and AR are technologies with a lot of untapped potential. I parked this project since my pitch didn’t make it. But with the recent metaverse and NFT hype, I think it would actually be fun to create a demo for this.


#2 - Side Project Cemetery


![Sleepylight](/images/makerlog/003-build-a-lamp.jpeg)

Week 3 of 2022, January is flying by fast. This week was not my most productive, I’ve been feeling a bit under the weather. This week I mainly focused on my 9-to-5 job and studying for my upcoming GCP Security Engineer exam next week.

However, in between those, I build a lamp! When I was making my inventory last week I also went through my hardware projects. Most of them are just disassembled electronics gathering dust. Last year I [build a Game Boy with a Raspberry Pi](https://robindeneef.com/blog/002-hardware-pigrrl), but a few years before that, in 2018, I build a bedside lamp that would nudge you into better sleeping habits, for example pulsing red when it’s time for you to go to sleep and not turning off unless your mobile phone is not detected in your bedroom.

I had most of the parts, so I put the lamp together and wrote some code to turn the light on and off. It’s using [a RGBW neopixel ring](https://www.adafruit.com/product/2851?ref=robindeneef.com) so I had some colouring options. I added a fading mode as well that loops through all the different colours and a candle mode that simulates a flickering candle.

<Video source={"/images/makerlog/003-SleepyLight.webm"} type={"video/webm"} />

A few years back I started working on CATTS (Connect All The Things Securely), a DIY home automation system that would allow me to interact with all my devices from all my devices. It was time to set that one up again, so I could control this light. In its current form, CATTS is just an MQTT server with a front end website that sends messages to the MQTT server. The devices then listen to a specific topic, and change depending on the messages. Nothing to fancy as of now.

The main reason I wanted to dive into the hardware part again was mostly that I think it’s awesome to have digital code translated to the physical world, but also because I have finally found a [Nintendo Power Glove](https://en.wikipedia.org/wiki/Power_Glove?ref=robindeneef.com) that wasn’t too expensive for me to ship to Europe. This piece of 1989 retro technology would be an awesome platform to control my home automation and other things like PowerPoint presentations. So I’ll try to plan a hardware project with it for PiDay this year.

I’ll probably write a bigger blog post going into more detail on CATTS and the SleepyLight build but for now, I have to concentrate more on studying for the exam.


#3 - Build-a-Lamp


![Google Cloud Certified Professional Cloud Security Engineer](/images/makerlog/004-gcp-security-engineer.jpg)

Last week of January, spend most of this week studying for my Google Cloud Certified Cloud Security Engineer exam. I can proudly say I passed! 🎉

GCP has clearly expanded it’s arsenal of security tools. When I started working with Google Cloud we did Secret Management by putting encrypted strings in a Cloud SQL database, now there is a Secret Manager with a handy API to do all that work for you. We also had to maintain a Forseti Instance to have any oversight in our security infrastructure. Now Google Cloud has a Cloud Security Center and some handy tools like IAM recommender to help you set better permissions and Firewall Insights to help you make sense of all those Firewall rules. 

And that’s not all. We’ve also seen a clear shift towards hybrid cloud. Running your workloads partly on-prem or in some other cloud. And still being able to use GCP for specific workloads. 

Both of these where a big part of the exam. 

Diving into all the documentation also gave me a lot of new ideas for posts on [GCPSecured.com](http://GCPSecured.com). I’ll probably spend some time next week transforming my notes to more full fleshed articles. 

Next to that I’ve been slowly probing into the Nintendo Power Glove to see how it works and how I want to turn it into something more.

Becoming a Certified Cloud Security Engineer

#4 - Certified GCP Security Engineer


![Drawing of mailman](/images/makerlog/005-we-have-a-newsletter.jpg)

This week was a bit all over the place. Last weekend I had a talk with a friend who had sold a simple NFT generator for 15 000 euros. So I did the only sensible thing and tried to build one myself. After 4 hours I had something working if I only I were a better artist. But this got me a bit down the NFT rabbit hole again. I had mostly avoided NFT’s since I think it’s a big hype and current NFT projects are not bringing a lot of value. But I might rethink my stance and whip up one or more MVPs if I can find some time. 

I also did a deep dive in the power glove I bought a couple of weeks ago. I think I’ve figured out most of the inner workings of the device and placed an order for new components. They should arrive before the weekend so you can already guess what the next maker log will be about! 

And finally some real work! I noticed that my website and blog post didn’t have any meta tags or open graph tags. So I spend some time updating my blog generator code and use it to generate these tags for every page based on metadata like the featured image etc. Since we also ended the first month of the year I hastily decided on starting a monthly newsletter. You can find that one on [https://robindeneef.substack.com/](https://robindeneef.substack.com/)

Work at my day job is ramping up so I might take my foot off the gas a little in the coming weeks. But don’t fret. I will be playing with electronics during every free moment I can find.

#5 - I Have A Newsletter!


![A keyboard in the matrix](/images/makerlog/006-keyboard-matrix.jpg)


> *This is your last chance. After this, there is no turning back. You take the *blue* pill—the story ends, you wake up in your bed and believe that keyboards are magical devices. You take the *red* pill—you stay in Wonderland, and I show you how deep the rabbit hole 
goes.*

This week I started with the first part of retrofitting the power glove. I wanted to start with the keyboard. This led to a small deep dive into how keyboards work. Let’s share some findings.

A keyboard is just a collection of keys. A key is normally connected to 2 wires. One of those is connected to a power source and when the key is pressed, the power can flow through the second wire to whatever pin that is listening on the other end. If that pin receives power, it knows that the key has been pressed and we can register that button press. 

If every key would need 2 wires, a standard 101 key keyboard would need 202 wires and its controller would at least need 102 pins. It would be hard to cram this all into a small form factor. Luckily there is a circuit called a keyboard matrix. 

In a keyboard matrix, you divide your keyboard into rows and columns. First, you send power through all of the rows and you listen to the columns pins. When a key is pressed the corresponding column pin will receive the signal and we’ll already know which column was pressed. Next up you switch the roles around. Now you send power through all your columns and start listening to the rows. Now the corresponding row will receive a signal and you’ll know exactly which key in the matrix was pressed down. In a normal keyboard, this all happens at incredible speeds that allow the keyboard to register multiple keystrokes at the same time. This is a very simplified overview but it will allow us to continue to the Power Glove.

The Power Glove’s keypad is also a keyboard matrix. Since I don’t want to damage the glove too much I started creating a “dev kit” version of it on a breadboard. I loaded up some keypad library provided by Arduino but I got very weird readings on it. After reading countless blog posts and diving into the internal code. I think I found the issue. The Arduino keypad library was written for AVR chips and the Arduino RP Connect I am using is ARM-based. I haven’t pinpointed exactly and have already written a part of the controller code myself, but it’s not so reliable and feature-rich. I might revisit the library later and make the necessary changes to support ARM processors. That’s it for this week.

#6 - The Keyboard Matrix


![A robot playing an NFT slot machine](/images/makerlog/007-botting-nft-games.jpg)

My workload has been ramping up at work, so I didn’t have a lot of energy for other things this week. I got bitten a bit by the NFT bug. And I have been reading up a lot on it. The current state of the NFT landscape does feel to me like mostly a cash grab. But I think it has some potential. 

Certificates, achievements, and badges would be great as NFT but it would be stupid to make them tradeable since you don’t want to grind multiple hours to get an achievement if somebody else can just buy it. Most of the projects also don’t have any real utility, only promises. I’m quite curious how it will evolve. 

Most of the games that do exist feel a bit like early 2010 browser games, where I spend loads of time. But currently, for every action, you do you have to confirm a transaction. This doesn’t feel very user friendly, nor cheap. 

I also stumbled upon a tweet of someone who was making quite some money with a bot he had created for an NFT game. This was genius, botting on Runescape might have been one of my first experiences with coding and automating. (Sorry Jagex 🙃). 

I wanted to implement some bots myself. It adds zero value to the NFT space but if other people can go for cash grabs, so can I! Or at least I thought so at that moment. I spend some time setting up a bot for Bridgeworld. But most games require you to already have an NFT to play the game. Most NFT prices for these games start at a couple of thousand euros. Not really what I want to spend on it. I got stuck at automatically accepting transactions afterwards I kind of gave up for now. 

I used a small script to execute some clicks at certain locations at a certain interval and that’s it for now. If anything changes about the game my script will crash and burn and maybe accidentally confirm a transaction sending all my money away, so it’s not really running at the time. 😅

However, I did find some interesting resources if you want to get into Blockchain Programming. 
 * [Welcome to NFT School](https://nftschool.dev/)
 * [#1 Solidity Tutorial & Ethereum Blockchain Programming Course | CryptoZombies](https://cryptozombies.io/)

#7 - Botting NFT Games


![Scoreboard with Firebase winning 1-0 against MQTT](/images/makerlog/008-iot-statemanagement-with-firebase-vs-mqtt.jpg)

One of my freelance products I have worked on a few years back is a scoreboard for a local football club. The scoreboard software runs on a Raspberry Pi, and a user has to use TeamViewer to connect to the Pi and access the controls, not the most user friendly. 

To improve the user experience I had quickly build a small progressive web app. Using MQTT to send data to the scoreboard. This led to a few problems.

```json
topic: scoreboard
payload: {
	field: "homeTeamScore",
	value: 1
}  
   
```  
   
First, I had to maintain the app, the scoreboard and the MQTT server. If one fails all fail. Not the ideal scenario since I’m just maintaining it on the side. 

Second, there is no central state management, when another users connects to the scoreboard it has no idea what the first user has already sent to it. It’s possible to request the state from the device every time. But it’s not very handy.

And third, I had a bug with the timers. When a timer was started in the app, it would start the timer on the scoreboard with a few seconds delay, and sometimes when the timer was paused, it would continue running. I’ll elaborate on this issue and my fix next week. 

So, how did I tackle this issue? Firebase! I moved all the data, like team and team logos to Firebase. I’m also planning to deploy the scoreboard software and the app both from Firebase Hosting. 

For the state I’m using Firestore Real Time Database. I created a collection *"state"* with a document *"gameState"* and this object has all the data I need. The selected teams, the score, elapsed time etc. With Firestore Real Time Database both the scoreboard and anybody with the app can listen to this state, when one client performs an update this will be propagated to all the other clients and the scoreboard. 

```json
{
   "awayScore":1,
   "awayTeam":{
      "image":"https://link.to/awayteamlogo.png",
      "name":"Away Team"
   },
   "elapsedTime":0,
   "homeScore":2,
   "homeTeam":{
      "image":"https://link.to/hometeamlogo.png",
      "name":"Home Team"
   },
   "id":"scoreboard",
   "startTime":"19:30",
   "status":"PLAYING",
   "timerTimestamp":null
}
  
```

I’m still not sure if it’s an anti-pattern and I’m sure it will have it’s downsides. For example I don’t think the game state can handle big amounts of updates in a short time. But for this use case it works and I have almost nothing to maintain anymore!

![Scoreboard deployed in the real world.](/images/makerlog/008-scoreboard-in-the-field.jpg)


Using Firestore to manage the state of IoT devices instead of MQTT

#8 - State Management of IoT Devices - Firestore vs MQTT


![Sleepylight](/images/makerlog/009-no-more-reinventing-wheels.jpg)

One of the biggest mind-shifts I have made since I started working, is to stop being a re-inventor. Stop doing everything yourself.

Back in the day, when I started working on a project. I would quickly encounter problems that needed fixing. Where will I host my stuff? Where will I store my data? How will I handle Authentication? Etc…

I quickly started to google for solutions and stumbled on pre-made solutions. But what is that? 20 euros for a database? Per month? I can do this myself on a 5 euro [Digital Ocean](https://m.do.co/c/94889662e24b) droplet! Hosting another 10 euros? I can run Apache on that same droplet and save some more money.

I did try to control and manage everything myself, after all, why not? I could be sure of my bill at the end of the month, with no pay as you go plans. I retained control of all my data and my code. I felt so productive when after a whole day I could save my users in my database. Life is great!

Soon, however, weeks would have passed and I’d only have the basics of my project set up. Discouraged by the lack of progress, I’d abandon the project and start something brand new. The first thing I did on the new project? You guessed it, setting up another database and all the other basic infrastructure. 

When I started working with managed Google Cloud products I was shocked at first by the price. Why would I pay so much if I could set this up myself? When I started comparing it to my hourly rate it started to make more sense. If I spend 2 days setting it up, at a meager 40 euros per hour rate, that would cost 640 euros. That would be 5 years of using a managed service at 10 euros per month.

It even made more sense for me when I started to understand that I abandoned side projects because it took so long to finish them because I wanted to do everything myself. My mindset shifted from “Why would I pay for this, if I can do it myself” to “How can I get this out as quick as possible.” I

Now I use a lot more services. Need to build a website? [Webflow](https://webflow.com?ref=robindeneef.com). Database? [Firestore](https://firebase.google.com/products/firestore?ref=robindeneef.com). Authentication? [Firebase Authentication](https://firebase.google.com/products/auth?ref=robindeneef.com). I wrote a [blog post on my current stack](https://robindeneef.com/blog/003-tech-stack-2021).

Now when a cost would spiral out of control, I can still optimize it later. But that would be an indicator that the thing I built is being used by more people, so it would be a good problem to have. 

I mainly wrote this post for myself, to remind myself it’s okay to cut corners and pay a bit more for the convenience of putting your work out there better and faster. But if I can convince you to try it too, that would be even better!

One of the biggest mind-shifts I have made since I started working, is to stop being a re-inventor. Stop doing everything yourself.

#9 - No More Reinventing Wheels


![Power Glove and Quaternions](/images/makerlog/010-power-glove-quaternions.jpeg)

It’s been a while since I’ve posted an update on my Power Glove Adventure. I didn’t touch it for a while because I kept struggling with getting the keypad to work. It felt like a simple thing, but it kept glitching and I got frustrated. So I decided to tackle another part of the project! 

The original Power Glove used a TV mount with microphones and had small speakers mounted on the top of the hand. This way the Power Glove could use echolocation to find its position with respect to the television. The idea sounds great but in practice, it wasn’t very accurate. 

## Inertial Measurement Unit

I want to replace this system with a simple IMU chip in my build. But “simple” might not be the best word to describe the chip. An IMU or Inertial Measurement Unit is a chip that has a few onboard sensors like an accelerometer and gyroscope to track its position in space. Why wasn’t the IMU used in the original design? It simply didn’t exist in 1989, and if I did, I’m sure the US military would have killed for it. These days you can pick one up for 30 euros at your local electronics store. I picked up an [Adafruit BNO055](https://learn.adafruit.com/adafruit-bno055-absolute-orientation-sensor?ref=robindeneef.com) and got cracking.

The Adafruit website has an example for both the Raspberry Pi and the Arduino. I tried to set up both and got the furthest with the Raspberry Pi. So I kept working on that version for now. Unfortunately, I wasn’t able to get it all working. For some reason, the movements of my hand don’t match up with the movements of the model. 

Some things I’m trying:

- **Lining up the 3D model correctly** - I lined the 3D Model up in Blender. I used the “Front View” camera and pointed the hand away from me. When I loaded the model into an STL viewer, I noticed the hand was pointing up. This made me dive into the coordinate system and I found out that Blender for some reason has the Y-axis as “Depth” in the front view instead of the Z-axis. After lining the model up with the Z-axis I got a bit closer but it’s still not working.
- **Diving into quaternions** - Next up was to dive more into the code and see what is going wrong. I noticed that the read-out of the heading, pan and tilt did make sense. But the 3d model was still not aligning with my movements. After some digging into the code, I noticed that the position of the model is decided by quaternions. By what? Exactly my first thought. I barely understand it myself so I won’t try to explain it. But here is a good Youtube Video I found on the topic.

In the end, I haven’t found a fix yet. But I’m getting closer. And learned something new along the way. Although my brain still hurts from all the math.

Powerglove update, learning quaternions and 3D moddeling.

#10 - Powerglove Update: Quaternions

![Google IO 2022](/images/makerlog/011-google-io-2022.jpeg)

Last week was Google IO 2022. Why I couldn’t join in person, I spend two of my evenings in the awesome virtual Google IO Adventure Game. Here are some of my highlights and takeaways.

## Google IO Adventure

First of all, the Google IO Adventure game was a great way to explore a conference digitally. I/O Adventure is a 2D game world where you can walk around, discover new google products and try them in a code lab and discover virtual swag and easter eggs. 

Most of the time, when a digital conference takes place, I just select a number of talks I want to follow based on the titles and descriptions and watch those. The Adventure game “forced” me to explore all the different product islands if I wanted to get an achievement, this felt a lot like walking through an event hall and walking past all the product booths in a real-world conference. While I didn’t participate much in the social aspect, I really enjoyed taking some of the code labs at my own pace. 

![Inside Google IO Adventure](/images/makerlog/011-io-adventure.jpg)

## Cloud

Google Cloud had a good keynote that I’d definitely recommend [“The cloud built for developers”](https://www.youtube.com/watch?v=K4Benk0SPE8). 

One of the themes I noticed through all the talks was that they are **democratizing artificial intelligence**. By focusing on making AI models more efficient so that they can run on mobile and websites. And providing the right machine learning tools and products so that you don’t even have to know a lot about AI anymore to incorporate it into your apps. 

Another big announcement they made was the extension of Google Cloud Run with **Cloud Run Jobs**. Cloud Run is Google Cloud’s Serverless platform. Meaning it’s managed by Google and you only pay for what you use during execution. For now, it was mainly focused on “short” running tasks triggered by requests with a default limit of 5 minutes that could be extended up to 60 minutes. With Cloud Run Jobs it is now possible to run long-running jobs like generating reports on Cloud Run. 

My personal highlight from the Cloud updates was [AlloyDB](https://www.gcpsecured.com/posts/2022-05-what-is-alloydb). AlloyDB is a fully managed PostgreSQL-compatible database service. You could already run PostgreSQL on Google Cloud in their Cloud SQL product. But lately, I am spending a lot of time increasing the performance of geo-spatial queries and it’s becoming a bit of a pain. AlloyDB promises to fix this issue with an AI-optimized columnar engine for an impressive boost to query performance. AlloyDB would also take away some of the maintenance work like increasing disk allocation and vacuuming. 

## Firebase

Currently, my favourite web stack is NextJS with a Firebase backend. So I was looking forwards to the Firebase updates, and they didn’t disappoint. 

First of all **Firebase Hosting will now support NextJS** hosting out of the box. (Along with angular). This means I’m no longer limited to Vercel when I want to use the SSR functionality. I’d still have to check if Cloud Functions will automatically be created like they are with Vercel and how pricing compares.

Something that apparently already existed for a year but I only just discovered, is **Firebase Extensions**. Firebase Extensions allow you to quickly add popular APIs like Stripe and Algolia without much work to your Firebase app. In the new update, they have added even more extensions and now allow you to write custom code for that extension. Making it even faster to develop applications. 

Firebase has also improved the developer experience. It is now possible to add performance monitoring alerts to your app so you know when things are going wrong within your app. They are also integrating Google Play Store more. First of all, with Crashlytics, you now can find and fix issues faster within your app. But also with App Check Security which allows you to improve your App Security by verifying that only your app calls your backend. 

## Flutter

Talking about apps. Flutter is also growing at a steady pace. Flutter allows you to create one codebase and deploy it to app, web and desktop. Flutter introduced **Flutter 3** with stable support for macOS and Linux apps. While I haven’t used Flutter in the past except for Google IO’s Codelab. It is definitely on my radar. 

Another update I got excited about was that Flutter is being connected more to the Cloud Ecosystem. With the release of **FireFlutter**, it is now easier to connect Flutter to Firebase so I can still use my familiar tools while developing apps.

## Ethics & Accessibility

Another thing that caught my eye was the focus on ethics and accessibility. In the machine learning track, there were a few talks focused on responsible AI review processes and how to apply responsible AI principles in datasets. 

There was even a whole track (or island in I/O Adventure) dedicated to accessibility. I was really amazed by all the progress in this track. I must confess that it’s easy to overlook how other people experience the web. For example, how screen readers interpret websites or how colours and contrasts have an effect on how people experience your website. As a developer, these things are often an afterthought or not even a thought at all. By including accessibility by default or making it easier to implement these features and making the web more inclusive. 

These were my personal highlights of Google I/O but I only scratched the tip of the iceberg. During the keynote Google teased some new hardware coming to the market. And also showed an impressive demo for a new Google Glass-like device that could live subtitle real-world conversations. There were also more islands to explore in I/O adventure each with there own updates. Like Android, ARCore and ChromeOS. I definitely recommend to check out their program at [https://io.google/2022/program/](https://io.google/2022/program/)

A recap of Google IO 2022, and my personal highlights of the conference

#11 - Google IO 2022


![Google can't find my websites](/images/makerlog/012-seoopsy.jpeg)

I did an oopsie. With the SEO of my blogs. 

Since I’ve been writing a bit more online. I’ve been dabbling a bit with SEO. Something I noticed these past few months was that a small blog with 3 blogposts written in 2020 ([fullstackalmanack.com](https://fullstackalmanack.com)) was having a lot more hits than another blog with 5 blog posts ([gcpsecured.com](https://gcpsecured.com)) and this blog with 15-ish blogposts. I know these blog posts numbers are rookie numbers for veteran bloggers but it still made me wonder why. 

One of the distinctions was my tech stack. For FullstackAlmanack I use Hugo with a template. The others I moved to NextJS for more control over the design. After diving into the code I immediately saw that the FullstackAlmanck template had some good out of the box SEO optimisations backed into the template. I checked the others, and zero. 

This looked like something I could tackle in a weekend. 2 small tasks. 

1. Dynamicly add metatags. 
2. Generate a site map after the site has been build. 

## Add metatags to NextJS Dynamically.

Metatags allow you to modify how Google or another search engine sees your website. You want to create a relevant title and description since this is what users will see in the Google Search results. But you can also add relevant data like when a post has been published or updated to let Google know your content is still relevant.

Not only search Engines but also Social Media makes use of these MetaTags. They can be used to tweak the card that for example twitter generates when somebody shares your site (You can try it out by sharing this site if you want *wink*). This is achieved trough OpenGraph.

Ofcourse I didn’t want to add all the Metadata tags myself on every page. So I looked for a solution. I stumbled upon next-seo. A handy tool that let’s me set a default for all my pages and allows me to dynamicly update tags per page. Best of all it was easily implemented. On to the next task.

## Create a sitemap for a NextJS Static Site

Another thing I wanted to add is a sitemap. A sitemap is a file on your website most often found at /sitemap.xml that tells you all the pages on your website. This helps a search engine index all your pages by taking the guesswork away from them. 

To accomplish this, I wrote a small script that generates the XML file based upon the files that are put in the build folder after a static export. It took some tweaking but we got it done. 

## And then I did an oopsie

With all the changes implemented, I deployed, waiting for the flood of people to land on my site. 

And then… Nothing… Now one thing I learned from reading SEO blogs is that it takes time. Domains have to be warmed up, blog posts have to mature. I wasn’t really expecting much. 

But my changes seemed to have the reverse effect. Instead of a flood, the little trickle I had completly dried up. I gave it a few weeks, still nothing. This is the point where I discoverd Google Search Console. A handy tool to see how Google is treating your website in the search rankings. 

I also discoverd something else, the only page Google was indexing of both my sites was the index website. All others were gone. 

Remember that we installed next-seo and that it had this handy feature of creating default metatags that could be reused on every website? Well one of the tags I put in there was the canonical tag. For those of you who don’t know what it does, a canonical tag let’s a search engine know that this page is a copy of whatever page is in the canonical tag. This let’s google know not to index your duplicate pages. 

Well I set it as my root domain and didn’t update the canonical tag on any individual page. Meaning the search engine now thaught that every other page or blog post was a copy of my landing page, so it didn’t see a reason to index them anymore. Auwtch. 

From a technical point this is quickly fixed. I removed the default canoncial for now and will probably add them later when I can generate them dynamicly. Now it’s just waiting on Google to find my pages again.

Mistakes I made with the technical SEO of my blog. Or how I removed all my articles from Google by accident.

🛠️ Maker Log