About Me

PGP Public Key

It's been a journey. Never before I was able to stick with the website I've developed for myself for so long :)

 of this series, I outlined some new stuff that I changes since I published 

 (it's pretty cool), and described how I go around 

Today, I want touch a little bit on some of the moving parts that are involved. It's still a more or less general overview. Eventually, I'll get to posting all the technical bits as well.

At the top of the home page there's a Covid component. It's a neat little thing that fetches latest data from 

 and presents it in three nice cards. Early on I decided that I'm going to have this at the top of the page for the remainder of the pandemic. Since CovidTracking is 

 its data collection in March, I'd need to switch to a different source. Hopefully, sometime soon I'd switch to tracking the recovery and will remove this component entirely once we are on track to recovery.

 to update data and a bunch of tricks to display how it has changed since the day before. 

This one is more or less standard. If you scroll to the bottom of the home page, a set of new posts will be loaded and show up. This is made so that the home page itself loads faster, while additional posts are loaded lazily on demand. This one is using `request` to fetch the next set of posts from Sanity's GraphQL endpoint, nothing fancy, but I'm still pretty proud of it. 

An arbitrary decision that I'm still contemplating. Sanity offers GROQ as their main query language. It's a bit unusual and takes some time to wrap one's head around, and I'm almost there, I guess. But so far I'm using familiar GraphQL to fetch data. This approach introduces some unexpected challenges. For example, when fetching a blog post via GraphQL, you get main image as a reference to an actual document. With GROQ you could request this image object as well, but with GraphQL it's quite tricky and a bit convoluted. This fact is keeping me on track to switching to GROQ eventually.

It's been a constant battle between me wanting to push something to prod here and me being cautios and holding back because things are not perfect yet, not ready for prime time, so to speak. 

Covid component used to break with unusual data or upon some unexpected schema changes on the CovidTracking Project side. I think, I fixed most of it.

Infinite scroll used to break unexpectedly. Again, appears to be fixed now. 

Comments are an unfinished mess that actually works pretty well, although it does lack a ton of features. 

All of these things are not perfect. In fact, nothing about this site is perfect. However, I decided to go ahead and push it anyway. Moreover, I push most updates almost immediately to production. So most of the time you're seeing the very latest code running the site. 

At first, I really struggled with this. I'd scrap the entire project and start over because of how 

 it was getting. I'd delete entire components to start over because of this same reason: they weren't good enough. It cost me months of lost time. What I learned, though, is that 

exposing it to the world helps me move faster given your feedback

If I chose to make things perfect first and then push them, this site wouldn't go live, probably, ever. So here it is, imperfect, live, and avaialble to you to criticize and comment. Did I mention that comments are a reliably working mess? ;)

In this installment, let’s talk about what it takes to start over and why perfect is indeed the enemy of good.

In this installment, let’s talk about what it takes to start over and why perfect is indeed the enemy of good

Building this website: Part 3

It’s safe to say that for the first time in a long time, I actually finished something. Well, not 100% finished, but got this 

, I outlined some of the plans for this blog. And while Social Images — one of the features I planned early on — was 

This particular site is powered by Next.js 10, a fantastic framework powering millions of static websites. It’s really easy to build a static blog with Next.js, hook it up to Sanity.io, and deploy it to Vercel. Next.js is smart enough to offer both static pages, dynamic pages, and a thing they call Incremental Static Generation. With out-of-the box serverless functions integration with Vercel, truly the sky is the limit. 

The biggest challenge, though, comes when you realize that your site is built once, then deployed and remains what it was at build time until you re-build and re-deploy It.

Clearly, some pages and features absolutely require dynamically generated pages. Take user profiles, for example, or dashboards, you get the idea. Next.js allows you to mix and match static and dynamic content, but dynamic pages do not get some of major benefits of pre-generated pages. 

And here we come to the comment sections of blogs. There’s a fair number of folks who detest blog comments, and I understand the sentiment. I’m not sure I’m a fan either, but here I am, learning stuff while building a comment section for my blog 🤷‍♂️

Comments are not dynamic per se. They are static when already posted. Yet, when someone posts a comment things get more complicated. A newly posted comment could trigger an entire site rebuild, or, in case of Next.js, trigger an incremental rebuild of a specific page (I’ll get to this in a moment). So this solves the issue, right? Someone posts a comment, Next.js rebuilds the page, everybody’s happy? Not exactly. Users would have to refresh the page to see their new comment: the page had been rebuilt in the background, yes, but to get this newly built page, you’d have to hit refresh. Not ideal.

Well, there’s a way around this limitation as well. 

 to the rescue! With a nice package from Vercel team called 

 you can do all sorts of magic. And here it all comes together:

A bunch of static blog posts gets generated at build time and deployed to a static hosting

Someone wants to leave a comment to a specific blog post

They visit the page and post their comment

Next.js triggered incremental rebuild of this specific blog post page

SWR forces to refresh the content of the page in the background

A happy user sees their comment magically appear almost immediately after posting, without a page reload!

Now, it sounds pretty simple and straightforward, and I promise you it is! However, there’s so much more that goes into posting comments. 

Believe it or not, but I spent probably 80% of the time on these two items. I ended up storing comments in 

. Let me gather my thoughts and walk you through the specifics in the next post. 

Feel free to leave a comment below :) Please keep in mind that it’s still very much 

: some obvious things don’t work as expected, others are half-baked, and the entire thing is fairly easy to break. Be gentle :)

For the past couple of months, I've been working on a comment feature for this blog. Now that it's almost finished, I invite you to check it out along with some implementation details.

Nextjs, serverless functions, MongoDB, SWR, dynamic refresh, and more. Here's how.

Dynamic comments for a static website

I was planning to add social images to my posts for a long time, and when I launched this version of the website, I didn't really put any effort into making this happen. As soon as I shared the launch post, I discovered that many things were broken with social images, from errors in URL encoding to a wrong background image on each social image. 

As you can see, the background here belongs to a different post, although this particular card doesn't have any other obvious issues. In any case, this is something I wanted these cards to actually look like.

It's not perfect, but here's what's going on this card:

There's a blurred cover image that belongs to this particular post in the background

A card with post info is overlayed on top of this background image

There's a short summary of what the post is about

There are different approaches one could take here, from passing parameters of an image directly to a service like Cloudinary to generating a screenshot. Without going into obscure details, here's how I made this happen.

I created a page, that generates a webpage with all the data I pass to it: title, publication date, category, etc. 

 leads to the page that builds the social card.

All this is is an HTML page dynamically generated based on passed parameters. It's this basic but opens a ton of flexibility. This page is just one of my other pages on this website.

Now we need to turn this page into an image. I use a serverless function to do this. This function accepts required parameters, passes them to the social card page, takes and returns a screenshot. There are different ways of doing this, and I opted for a headless Chrome. I've written a function that loads the page generated in the previous step and takes a screenshot of a viewport of the size I like (780x420 in my case). Again, without going into obscure details, here's what it looks like:

Depending on whether I'm developing or this runs in production, this function takes a URL to the card page, launches headless Chrome, takes a screenshot, and returns a base64-encoded image.

Step Three: upload image to Cloudinary (or anywhere, really)

This is the easiest and the most arbitrary step. I wanted to use Cloudinary in some way to learn more about it, and although here I only use it as image hosting, I was able to poke around it for a bit. Anyway, in this step, we take the image we got in the previous step and just upload it to Cloudinary:

Again, there are different options here: you could return a permanent redirect with HTTP 

 status, or just respond with an OK and move on. The difference is in the way you incorporate the resulting image URL into your HTML. Some might add the URL of the serverless function that captures and uploads a screenshot right inside of a 

 tag: in this case, permanent redirect makes sense. As soon as someone requests the page, they will attempt to read the meta tag URL and receive the uploaded image URL in response, permanently. However, in my experiments, it looks like sometimes the serverless function runs for some time (3-5 seconds) and meta scrappers just default to not having any image instead of waiting for the image URL. What I'm doing is a bit different: I'm "fetching" this serverless function in 

of the post's page and "hardcode" the resulting URL in the meta tag (since I know upfront what the URL would be, it's easy to know beforehand what URL to use for every post — it always look like this: 

https://.../social-images/{POST TITLE}.png

Well, apparently, it's more performant to add the URL to the serverless function directly to the meta tag after all. Sorry about the confusion :)

There are some checks and considerations in place. First, the function checks if the image already exists, and if so, it returns it's URL right away. Next, there are default values in place: in case the function doesn't receive a title or post date, it would use placeholders to still produce an image. Now, it takes up to 5 seconds for the image to be generated for the first time; if you attempt to share the post immediately after publishing without visiting it first, scrappers may not wait until the image is generated and use a default image or no image instead. These are some of the things to keep in mind and improve down the road. 

Since I launched my new blog, I discovered that social images were broken; they were an afterthought after all, and I decided to fix it permanently. 

Using Next.js, Vercel Serverless Functions, and Cloudinary.

Generating Blog Social Images

 about rebuilding this site, I’ve made enough progress to actually launch the site. You’re looking at it right now :)

, and I in fact built the entire site with Gatsby at its heart. But where’s fun in that?

While I was finishing the site with Gatsby, 

 came out, and I had to try it. It's such an impressive framework, there was no way I won't give it a shot. It took me a few hours to completely replace Gatsby with 

, and there's so much I love about Next! Just some of them are:

Choose your own data fetching (GROQ, GraphQL, plain fetch, you name it!)

By-default performance and web-vitals optimization

Built-in serverless functions (especially, when deployed to Vercel)

Developer experience is also pretty nice. With Next's amazing flexibility and ease of use, I was able to rewrite major chunks of code trying different approaches, and it not only was a breeze, but it also allowed me to try multiple things within just a couple of hours. All told, I'm a fan. I wish 

 gets to the same level of maturity sometime really soon — for now, Next.js is the next best thing.

I'm a huge fan of utility-first approach offered by 

. It takes a minute to get a hang of it, but when you get it, you get it. It's fantastically easy to style elements, move them around, make things as responsive or rigid as you want. It's a truly great tool for efficient and productive web styling. While I've been working on the rewrite, Tailwind upgraded from version 1.x to 2.0, migration was a breeze. 

 as a CMS for my website. Some of the reasons for this decision were, in no particular order: 

Great community and awesome documentation

Data portability: if Sanity doesn't work out for me, I can easily take all my data and move it wherever

So far, I love what I've built with Sanity, and I will showcase my setup in a separate post. I got so thrilled with this CMS that I've built a plugin for it: 

The last technology I want to mention is 

. Honestly, it was an afterthought to the large extent, and a lot needs to be done before I can claim in earnest that I'm using it. So far, all it does is "generate" social cover images for my posts. Try sharing this post on Facebook or Twitter to see what I mean. I will write another post about this bit as soon as I get to reworking social images.

Originally, I was planning on deploying this site to 

. I love Netlify, it's a great place to host a JAM website. However, at the time I moved from Gatsby to Next.js, Netlify was not too friendly to certain aspects of Next's powers. And given that Next.js is created by the same folks who run Vercel, I naturally just moved to 

. As a result, not only did I cut build and deployment time in half, I also have access to "real-time" web-vitals/lighthouse analytics — it's built into both Vercel and Next.js.

This year, I plan to make some major improvements. 

Improve progressive loading for images. Now they are lazy-loaded, which is good, but I'm looking to improve the experience with progressive loading. I've implemented this and had to remove it due to its wonkiness. 

Email subscription. With RSS effectively dead, email subscription will be the main avenue for delivering updates along with posting to social media. Low effort solution, shouldn't take long to implement.

Related posts. Another low-effort solution. With tags attached to every post, it's fairly easy to introduce relevant related posts at the bottom of every post.

Improve design. So far, I like the boldness of it, but there are things that I'd like to improve and so far I don't really know how to do it 🤷‍♂️

AI/ML generated image captions. Every image posted on the website will have a caption and/or alt text generated by 

 or vanilla JS. Not sure yet what route I want to go here. Vanilla JS search is easy to implement and could be as robust as I want it to be, but Algolia offers so much more than just search. I'm torn :)

LinkCards with metascrapper. Right now, I'm low-key using microlink.io and their React SDK to generate embedded cards for certain links. I don't like this approach for a variety of reasons, the main of them being it's a paid 3rd-party service. So I will build my own LinkCard component, with blackjack and hookers. 

Comments. Not sure how critical these are, but definitely worth exploring. The main difficulty here is the static re-generation of post pages when new comments are posted. Next's incremental static generation should really help with this a lot. 

. Powered by Auth0, I will offer some sort of extra content or functionality to members. 

. Mostly for the sake of learning how to do this with a JAM site. 

Finally, a variety of post types: book reviews, podcast episodes (

Stay tuned for more. One of my goals this year is to blog much, much more. And I'm determined to stick with this goal 💪

For the past few months, I’ve been rebuilding my website. This time, I’ve built it from scratch, with these two hands. In this post, I want to take a deep dive into what and how I built, and what’s next.

For the past few months, I’ve been rebuilding my website. This time, I’ve built it from scratch, with these two hands. Here's how.

Building this website: Part 2

There's no need to reiterate that 2020 was absolutely terribly awful in every way possible. Dead relatives, friends, and acquaintances, sick loved ones, ruined lives, and futures altered forever. In whatever scheme of things you look at 2020, it was abysmally horrible. Yet humans do human things: we adapt, regroup, process, and move on. And we have hope. Hope that 2021 will be better. That we will persevere, and come out of this whole mess stronger and more resilient, individually and as species. Today, though, I want to take a moment and take a look back at 

All in all, it was not too terrible, albeit terrible nonetheless. 

It was my first full year at Auth0 — I 

 in December 2019 and started really contributing in 2020. I enjoyed commuting to our office in Bellevue and hang out with my colleagues. I've been learning, in scientific terms, a 

 of stuff, and it was so very cool. And overall, I got so much better at everything I do!

In late February, my son Vlad had terrible viral bronchitis, which I'm almost certain was in fact COVID. Both my wife and I got mildly sick afterward, and since COVID testing and reliable information were non-existent, we'll never know for sure. In early March, Vlad's school had a case and was shut down. It hasn't reopened since. 

Auth0 offices closed in mid-March and there's no concrete plan to reopen them soon. They are ready for us to come back when it's safe: the Bellevue team outfitted it with all possible safety measures. I'm not coming back until everyone in my household gets a vaccine; most people I know are in the same boat. Our company offsite in Mexico was canceled, what a bummer. 

It's safe to say that because of where I work, I'm much, much better off than many. I can work from home and Auth0 paid for my home office equipment. I can take as much time off work as I need, at any moment, no questions asked (especially, if it's related to COVID). And for this I'm grateful. 

In March I finished my second tattoo. It's a Phoenix, a mythical bird that rises from the ashes over and over. This tattoo reminds me of all the difficulties I'd overcome over the years and that no matter what happens next, I will pull through. 

 and returned home in one piece. I also met a black bear in the wild and lived to tell the story.

Never in my life was I as productive as in 2020. Don't get me wrong, the first few months were brutal, distracting, and lonely but eventually, I got it.

I worked so much and with such efficiency, I still can't believe it. And it all paid off already or will pay off in immediate future.

This last bit made possible in part thanks to my psychiatrist: this year I was diagnosed with ADHD and bipolar depression and got proper treatment. There's still a long road ahead, but it's a start. 

Even when we were thousands of miles apart:

And of course, these things happened. Now I know what tear gas smells like, and why defunding the police is the only way of fixing it.

I also realized that I don't want to have people in my life, who do not consider human rights above all else. My social circle shrank considerably and I regret nothing.

For the first time, I voted in the US elections.

This by far the worst year in generations is coming to a close. It won't be missed, yet it will remain in our memory, history books, and our shared trauma will take decades to heal. Here's to 2021, hopefully, a better year.

2020, you won't be missed

Practically every week at Auth0 there’s a talk or presentation about something related to our products or technologies we use. My Americas developer support team now has its own talk, every week during team meetings. This past week was the first one of these, and I opened it with a quick talk “5 tools in 5 minutes”. I realize that’s a fairly low-effort topic, but a) you gotta start somewhere, b) Low effort 

 low quality, and c) I really do save hours of my life every month with these tools. Since you may also find some value in this, I decided to make a quick blog post about these tools. 

For any person who deals with multiple time zones, knowing what time is where now, and more importantly 

 now, is always a challenge. Our Americas Developer Support team is spread across 3 time zones, our global support team works in 10 time zones and covers the entire globe, my Auth0 colleagues work from, perhaps, all time zones, as do our customer.

It took me over a decade to get to the point where I’m comfortable using TextExpander. Not because it’s difficult to use but because I haven’t had a good use case for it before. These days as a 

, I type a lot, and a lot of the stuff I type is quite repetitive. Since I started using TextExpander, it saved me about 5 hours of typing things that I would type anyway. It’s quite simple: when you type a snippet, say, 

, TextExpander turns these tiny words into phrases and sentences (

 turns into my full signature, with email, title and such, and 

 turns into “Let’s figure it out.” When you type something a lot, TextExpander would create a new snippet for you and remind you to use every now and again until you incorporate it into your typing. At this time, I’ve got around 50 snippets, and I can’t be happier not to have to type the same things over and over again.

Paw is a native Mac application for inspecting and making HTTP requests. If you are familiar with Postman, Paw is basically the same but native to the Mac (unlike Postman, which is an Electron app). Paw is gorgeous, perfectly tailored to the system, works with all system shortcuts and native extensions, and it could be as powerful as you need it to be. Yet in the true spirit of native Mac applications, it’s not bloated with obscure features, bells, and whistles. It’s clean, beautiful, and, powerful — exactly the way we like our day-to-day tools to be.

There are dozens if not hundreds of apps one could use to take and share screenshots. Hell, you could take screenshots with a simple shortcut built into macOS, no applications needed! Yet with CleanShotX, you could take a screenshot or make a screencast using the same system-wide shortcuts you’d normally use, edit the image (highlight something, blur private information, add a text comment, arrows, you name it), and share it with just another click (or a ⌘-v). Those who remember Skitch killed by Evernote would absolutely love this one!

Finally, Paste. Again, there are a bunch of similar apps and a bunch of apps that have similar features (think Alfred or Quicksilver), but Paste made it really natural for me to never think about my copy-paste buffer ever again. If I ever copied something — anything — an image, a secret, and app id, whatever it is, I’ll be able to find it and paste it again with a natural keyboard shortcut. Paste makes it easy to search whatever you copied in the past and even create collections of frequently pasted things. Super easy to use, and tremendously helpful every day.

These are some of my favorite tools that make my day-to-day job so much easier.

Welcome to the Rosnovsky Park

Welcome to the
Rosnovsky Park