DEV Community: Johnny Fekete

I Thought Creating My Browser Extension Course Would Take a Weekend. It Took 4 Months

Johnny Fekete — Thu, 08 Jan 2026 10:03:54 +0000

I thought creating a “short video course” would take a weekend.
It took 4 months.

Here's what happened, what I learned, and why I'm actually glad it spiraled out of control.

How This Started

Last November, I spoke at React Summit US about building browser extensions with React (watch it here).

As I was preparing to the talk, I found that there’s not a lot of education material available, let alone a full course for total beginners.

So I decided to create one, as a side project. "I'll spend a weekend recording a few quick videos," I thought. "Cover the basics, publish them, done."

That weekend project turned into 14 comprehensive lessons and 4 months of work 😅

The Learning Curve I Didn’t Expect

Creating a conference talk is one thing. Creating a full course? Completely different beast.

What I thought would be hard:

Recording videos, talking in front of the camera
Explaining technical concepts

What was actually hard:

Ok, recording was indeed challenging, but once you have the nice backdrop and some basic lights, it’s fine (until your neighbor starts vacuum cleaning in the middle of your shot)
Structuring 14 lessons so they build on each other logically
Writing scripts that work for video (turns out speaking at a conference ≠ teaching on camera)
Editing (my DaVinci Resolve skills definitely improved 😅)
Deciding what to include vs. what to cut
Testing everything to make sure it actually works for someone following along

What I Built

The course teaches browser extension development by building a real note-taking extension called TabNotes.

An actual, production-ready extension that:

Syncs data across devices
Works on both Chrome and Firefox
Uses modern architecture with the WXT framework
Gets published to both extension stores

It covers everything:

Manifest V3 configuration
Popup interfaces and background scripts
Storage APIs and cross-device syncing
Content scripts and messaging
Cross-browser compatibility
Publishing to both stores

The course is pretty technical, but I tried to explain concepts as clearly as possible. It's for anyone who wants to build their first browser extension and understand the gotchas (and there are many).

What Worked

Starting with an outline. I mapped out all 14 lessons before recording anything. This structure kept the course coherent and ensured each lesson built logically on the previous one. I didn’t need a pre-written script, because my outline was super detailed.
Building the extension first. Before recording a single video, I built the complete TabNotes extension. This meant I knew exactly what I was teaching and could confidently walk through each step without surprises.
Batching tasks. I grouped similar work together - wrote all scripts, then recorded all videos, then edited everything. This flow kept me in the right mindset for each type of work and saved weeks of context-switching.
The mirror trick. I recorded with my iPhone but put a mirror in front of me so I could see myself. That visual feedback helped me catch awkward moments and maintain better energy on camera. Simple but effective.

What I'd Do Differently

Accept "good enough." As developers, we love perfection. But I spent way too long tweaking things that students probably won't even notice. Ship it, get feedback, iterate.
Invest in better audio equipment. I used my iPhone's built-in microphone. It works, but audio quality matters more than I realized. Next time, I'd get a proper external mic from day one.
Record in shorter sessions. I tried to power through entire lessons in one go. Breaking recordings into smaller chunks would have kept my energy more consistent and made editing easier.

What Surprised Me

Teaching forces you to understand things deeply. I thought I knew extension development well. But explaining it to someone else exposed gaps in my own understanding. I had to dig deeper into the Chrome and Firefox docs multiple times.
People want context, not just code. Early lessons were just "here's how to do X." Better lessons explained why you'd do X and when you shouldn't. That context matters more than I realized.
Mistakes are part of the process. When I got stuck and made some errors, instead of cutting them out, I embraced them. It’s normal to make mistakes, and showing the debugging process is also a valuable lesson.
Video editing is time-consuming. So. Much. Editing. Removing "ums," cutting, adjusting audio levels, adding captions... I have new respect for YouTubers.

Why I'm Sharing This

Video content is super easy to consume, but quite hard to create.

If you've thought about creating educational content - a course, tutorial series - here's my advice:

It will take longer than you think. 3x your time estimate. Then add 50% more.
You'll learn as much as your students. Teaching forces clarity. You can't hand-wave over concepts you don't fully understand.
Start before you feel ready. I kept thinking "I should learn more first" or "I should make it perfect." But you learn by doing, and perfect is the enemy of done.
Make it free first. I made this course completely free (no signup, no paywall). It removes the pressure to be "worth the price" and lets you focus on making it genuinely helpful.

The Result

After 4 months, the course is live: webextensiontutorial.com

14 lessons, all free, all on YouTube. You build a complete extension from scratch and publish it to both stores.

Was it worth it? Absolutely. Despite the time investment, I enjoyed the process. Pushing myself to create something I hadn't done before - that's kind of the point, right?

If you've been curious about browser extensions, check it out.

And if you've created educational content yourself, I'd love to hear what surprised you most about the process.

Oops, I Made a VS Code Extension

Johnny Fekete — Mon, 08 Jul 2024 07:26:51 +0000

Ever had one of those "how did I get here?" moments in coding? Well, buckle up, because I've got a story for you.

It all started with localization. I was working on my mobile app - Social AIde (an AI powered social-media response generator app built in Swift, thanks to AI because I never touched Swift before).

I wanted to add a bunch of new languages, but everything was hardcoded. Yikes 😬

The problem wasn't finding the hardcoded strings, but replacing them with keys for a key-value pair JSON file. Fun times, right?

Copy-pasting 200+ strings manually? No thanks.

There had to be a better way.

Spoiler: There wasn't.

At least, not in the VS Code marketplace. I looked for plugins, I tried to search online, but I was stuck with manually copying the string, then copying back the key.

I'm too lazy to that.
So I turned to my trusty sidekick, good friend, Claude AI.
Described my problem:


Please help me creating a visual studio code macro/extension, whatever fits my use case. Here's what it should do:

You select a hardcoded text in the editor, and initiate the plugin (maybe as a command, called "replace with localized string key". It would ask for what should be the key (in a prompt?)

Then it replaces the selected text with that key in this format: String(localized: "my_key")

Then add/modify a JSON file in the project's root folder to add the key and the original hardcoded string in a key-value pair.

In 4 seconds it laid out everything: how to start a VS Code extension, what code to add:

Mind. Blown 🤯.

No Googling required – just follow the instructions.

But why stop there? I figured, "Hey, let's make this available to everyone!"

So I asked Claude to add configuration options. Boom. Done.

Then came the publishing process: API keys, descriptions, licenses – Claude had me covered.

Of course, every cool extension needs a logo.

So I quickly jumped to recraft.ai and asked for a vector image of a "magnifying glass zooming in on an arrow pointing up".

So the only manual thing left was to take a screen recording (because all cool VSCode plugins have a nice gif animation) - of course Claude helped me how to insert it into the readme (which was also written by Claude btw).

Just like that, in less than an hour, I had a Hardcoded String Replacer VS Code extension live.

Zero prior experience required.

It's wild how AI is making our jobs faster.

Sure, you still need a basic understanding, but those entry barriers? They're crumbling.

So here's to AI, our new coding buddy. Making the impossible possible, one accidental project at a time.

Who knows? Your next "oops, I made a thing" moment might be just around the corner.

How to Connect Your Laravel Application to Digital Ocean's Managed MySQL 8 database

Johnny Fekete — Tue, 07 Sep 2021 15:17:45 +0000

If you're like me, you've spent way too much time trying to properly connect to a managed MySQL 8 database from Digital Ocean.

Everything looks great, you believe you configured everything correctly, but then you receive an SQLSTATE[HY000] [2002] Doctrine\DBAL\Driver\PDO\Exception error from your application.

Not a helpful error message, I've also seen it way too many times.

The last time I worked on my company's web app, I ran into this, and decided to document the solution, for the sake of future me.

If you're in my shoes, don't worry, I have you covered. Here is a step-by-step guide on how to fix it and set up a working connection from Laravel to Digital Ocean's managed MySQL 8 database.

Digital Ocean Configurations

Let's start by setting up the database.

Create a managed database in Digital Ocean. Make sure to choose MySQL version 8, preferably to the same region where your Laravel server is.

Once it's done, I recommend creating a new user instead of using the default one.

You can do it under the Users & Databases tab:

Make sure to keep the password encryption as is (MySQL 8+).

While you're here, you can also create a database for your project, it's up to you.

The next thing you need to do is allowing traffic from various trusted sources.

This means that only certain computers/servers can access your database.

You can set this up under the Settings tab's Trusted Sources section.

Make sure to add the Laravel server's IP (or if it's hosted at Digital Ocean, you can refer to it by name) and your local IP as well, so you can connect from your computer.

Testing the connection

If everything went fine, you can see the connection details in the Overview tab:

Make sure your new user and your database are selected, so you see the correct login details.

Also, check that you see the public host, as you're trying to connect from your computer.

Now, download the CA certificate file, and save it somewhere safe.

This file will be needed later when connecting from Laravel.

But for now, try connecting from your local MySQL client.

Make sure to select a MySQL 8 connection, and use the following configuration:

host: prod-do-user-XXXXXX.b.db.ondigitalocean.com replace with your database's public hostname
port: 25060 it's not the default, 3306, make sure to update it!
username
password make sure not to copy the extra space at the end of the password
database

and finally, choose the option so you can add the CA certificate that you just downloaded.

This is how a configuration can look like in TablePlus:

You should be able to connect now. If there's still some issue, double-check if your IP is whitelisted in the Trusted Sources list in the Digital Ocean dashboard.

Connecting from Laravel

Server Setup

Before you configure anything, make sure that you have the MySQL extension enabled for your PHP.

You can check this by running php -i on your server, and if it's not enabled, install it.

You can do it like this on an Ubuntu server:

sudo apt install php8.0-mysql

Configuring the database connection]

First, let's check our app's database configuration config/database.php.

Add the following to the end of the MySQL driver's configuration:

'ssl_mode' => env('SSL_MODE'),
'options' => extension_loaded('pdo_mysql') ? array_filter([
     PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
) : []

so it looks like this:

Uploading the CA certificate

Next, upload the CA certificate to the server.

I recommend adding it in your project's storage folder, eg.
[PATH TO MY PROJECT]/storage/certs/ca-certificate.crt. But it can be anywhere.

What's important is that your Laravel application can access it. For that, you need to set some permissions on the file.

I recommend very restrictive permissions, such as this:

chmod 440 ca-certificate.crt

Also, make sure that the user who executes the PHP script (normally www-data) has access to this file:

chown www-data:www-data ca-certificate.crt

Setting Up the Environment Variables

The last step is to set up the environment variables in Laravel.

Simply edit your .env file, and in the database area replace the values:

DB_CONNECTION=mysql
DB_HOST=private-XXXXX.b.db.ondigitalocean.com
DB_PORT=25060
DB_DATABASE=XXXXX
DB_USERNAME=XXXXX
DB_PASSWORD=XXXXX
SSL_MODE=required
MYSQL_ATTR_SSL_CA=[PATH TO MY PROJECT]/storage/certs/ca-certificate.crt

The connection, database, username, and password should be self-explanatory.
If you're connecting from another Digital Ocean server in the same region, use the private VPC network host (you can find it in the Digital Ocean overview tab).
The port should be always 25060, and you should include the SSL_MODE as required.
And make sure to include the full absolute path to your CA certificate.

If everything's configured, make sure to clean Laravel's config cache, by running php artisan config:cache.

Testing and Troubleshooting

If you followed these steps, you should be able to connect to your database.

To test it quickly, use Laravel's Tinker:

php artisan tinker

>>> DB::connection()->getDatabaseName();

This should return with your database's name.

If for some reason you still can't connect, double-check these common errors:

the Laravel application's IP is not whitelisted in Digital Ocean's trusted source list
incorrect path for the CA certificate
the CA certificate is not readable by the Laravel application (permission, ownership issues)
extra whitespace after the password
old Laravel config is cached, refresh it with php artisan config:cache

An Ode to JavaScript

Johnny Fekete — Thu, 08 Jul 2021 10:05:15 +0000

Oh JavaScript, please PROMISE me
That you'll treat me better.
LET's end THIS tragicomedy,
So both of us can GET happier.

Every time I CATCH up WITH you,
I feel pure joy and excitement.
These are the moments I AWAIT, to
Fill my VOID and reach enlightenment.

IF only you could stay kind to me.
What ELSE could I ask for?
Something goes wrong, you get gloomy
You CLICK and there's an ERROR.

WHILE my spirit reaches OUTERHEIGHTs
Without an ALERT you come to ruin it
It's another CASE of you picking a fight.
I DOCUMENT everything to myself to prove it.

Anger RETURNs, I lose FOCUS and grieve
DATE and TIME stops, another guilt trip
Don't make me REPLACE you and leave
This nonFUNCTIONal love/hate relationship!

Animated CSS Sparkler

Johnny Fekete — Sun, 10 Jan 2021 11:49:14 +0000

CSS animations can be super powerful and combined in the correct way you can achieve pretty much anything.

In this short tutorial, I explain how I created this animated sparkler with only HTML + CSS:

Source code on CodePen

Let's dissect the animation:

there's the stick that's burning with an ember and leaves the ashes behind
the light, that's constantly pulsating, and moving together with the burn
the sparks that are randomly showing up and fading out from the center, the burn

The Burning Stick

The stick has two overlapping elements: one that is the ash and one with the animation. I used a DIV and a ::before pseudo-class for the styling.

As you can see in the example, the ember and the explosive cover is drawn by a linear gradient, and the burning effect happens by a keyframe animation, that simply decreases the height of the overlaying element in 20 seconds.

.gun-powder::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;  /* this is needed so the burning starts 
                 at the top and ends at the bottom */
  width: 0.4rem;
  height: 10rem;
  background: linear-gradient(to bottom,
    orange 0.3rem,
    gray 0.4rem
  );
  border-radius: 0.5rem;
  animation: sparkler-burn-anim 20s infinite;
}

@keyframes sparkler-burn-anim {
  0%   {
    height: 10rem
  }
  100% {
    height: 0 
  }
}

Pulsating Light

The pulsating light is used for two things: besides showing a glow of the sparkles, it also functions as a container for them, and it moves together with the burn (so the sparks don't have to deal with moving while the burning takes place, just with the sparkling animation).

The glow effect has been created with another keyframe animation on the ::after pseudo-class, and it uses a simple scale transform to grow and shrink, resulting the pulsating effect:

.sparkler-light::after {
  content: '';
  display: block;
  border-radius: 50%;
  width: 9rem;
  height: 9rem;
  background-color: rgba(255, 255, 230, 0.05);
  animation: sparkler-light-pulsating 2s infinite linear;
}

@keyframes sparkler-light-pulsating {
  0%   {
    transform: scale(1);
  }
  25%   {
    transform: scale(1.1);
  }
  75%   {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

The .sparkler-light moves together with the burn, and as I wrote, it contains all the sparks.

<div class="sparkler-light">
  <div class="spark"></div>
  <div class="spark"></div>
  ... further sparks, 36 in total
</div>

.sparkler-light {
  position: absolute;
  width: 9rem;
  height: 9rem;
  margin-left: -4.4rem;
  margin-top: -1.4rem;
  animation: sparkler-light-anim 20s infinite;
}

@keyframes sparkler-light-anim {
  0%   {
    bottom: 11.5rem
  }
  100% {
    bottom: 1.5rem;
  }
}

Sparkling ✨

It's not possible to use random values in CSS. But what's possible is to assign random numbers to CSS variables, and use those.

I created 36 DIVs for the sparkles, each with the same animation, but setting two CSS variables:

<div class="sparkler-light">
  <div class="spark" style="--spark-rotate: 10deg; --spark-delay: 223ms"></div>
  <div class="spark" style="--spark-rotate: 20deg; --spark-delay: 844ms"></div>
  ...
  <div class="spark" style="--spark-rotate: 360deg; --spark-delay: 559ms"></div>
</div>

Then I could create the irregular order of the sparks by adding animation-delay: var(--spark-delay) on them.

I also rotated each one by 10 degrees (to make a full circle) with transform: rotate(var(--spark-rotate)).

Finally, I used a keyframe-animation to create the explosive effect.
It was important to use transform-origin: bottom center, so the sparks all originate from the same point.

The Final Sparkler

To polish everything, I applied a rotate transform on the whole sparkler, so it's not standing upwards.

I used Pug templating engine, to facilitate the typing (especially with the 36 sparks, with their random values), you can read more about it in the Type Less! Use Pug Templates! article.

The CSS Christmas Calendar

This rotating 3D Christmas gift is part of my Holiday project, the CSS Christmas Calendar. I posted a new calendar item every single day from the 1st of December until Christmas Eve.

I tried different techniques each day and learned a lot - and I share the most interesting techniques in this series.

All code is available on Codepen.

Check it if you want to see other Christmassy CSS magic!

3D Christmas Gift Box with HTML + CSS

Johnny Fekete — Thu, 07 Jan 2021 18:41:58 +0000

CSS is such a versatile language.
You can use it to design web layouts, interactive buttons, style your website's text... or create a 3D Christmas gift box.

In this tutorial, I'll demonstrate how I made one for my CSS Christmas Calendar, where I posted a new CSS art every day until Christmas.

Anatomy of the box

To start creating the object, I had to analyze the different parts:

a box, which consists of 5 sides (4 sides and the bottom)
a lid, which is similar except it doesn't have a bottom but a top part
the loops of the ribbon (left and right)
the two ends of the ribbon

Note: In the following examples I simplified the colors and sizes, in the final rotating box I used CSS variables to store them.

The 3D box

Although CSS is primarily used to style elements in 2 dimensions (X and Y axes), it actually knows about the third one (Z-axis, the depth).

To create a 3D box, I had to design the 5 sides and move/rotate them in the 3D space to get to their desired place.

As you can see, the sides already have the ribbon on them.

I achieved it with a linear gradient background:

.side {
  background: linear-gradient(to right,
    red 40%,
    white 40%,
    white 60%,
    red 60%
  );
}

So the trick is to have a horizontal gradient (from left to right) with sharp edges at 40% and 60%.

For the lid, the concept is very similar, but there are 2 gradients: one horizontal and one vertical.

However, if both would start with red, the upper one would cover the other. So I used transparent instead for one of the directions, and also a slightly darker color for the ribbon, to help distinguish them from each other.

.lid {
  background: linear-gradient(to right,
    transparent 40%,
    lightblue 40%,
    lightblue 60%,
    transparent 60%
  ),
  linear-gradient(to bottom,
    red 40%,
    white 40%,
    white 60%,
    red 60%
  );
}

The next step is to rotate the sides to their correct place.

First, a container div needs to get the perspective property. This defines how far the box is away from the user. I set it to 400px, which gives a realistic depth to it.

To move the sides to the right place, I used the transform property. Not only can it transform elements in 2D, but it can move and rotate in the 3D space as well (with rotateZ, translateZ).

.gift-box .gift-box-lid__side--top {
  transform: rotateX(90deg) 
             translateZ(120px)
             translateX(-10px)
             translateY(0);
}

After the sides were in their place, the whole box was moved to its correct place.

.gift-box {
  transform: translateZ(-100px)
             rotateY(50deg)
             rotateX(-15deg)
             rotateZ(-30deg);
}

I did it with the box and the lid too, you can try it yourself, and see how it'd look with a different perspective or rotation:

The ribbon

The ribbon consists of two parts: the two ends with a V-cut, and the two loops.

The end is actually a simple div, with 2 gradient backgrounds overlapping:

.ribbon-end {
  position: absolute;
  width: 40px;
  height: 110px;
  background:
    linear-gradient(45deg, white 72%, transparent 72%), 
    linear-gradient(-45deg, white 72%, transparent 72%);
  border: 2px solid darkred;
  border-top: none;
  border-bottom: none;
  transform: rotateX(-70deg)
             translateX(80px)
             translateY(-80px)
             translateZ(-60px);
}

With the transform property I could move them to their correct place, just like with the sides of the box.

Rounded shapes in 3D

So far the gift box consists only of rectangles.

But the loops of the ribbon aren't rectangular elements.

CSS doesn't have the functionalities of a proper 3D rendering engine, thus there's a limitation of rounded shapes.

Initially, I was playing with the idea to create 6-10 flat sections for the ribbon and rotate each one, but the result would've looked angular.

Instead, I ended up with a little hack: it's easy to create the shape of the loop with a rounded rectangle and a skew transform.

What if I would simply have many of that rectangle, behind each other?

So that is exactly what I did!

A 40px wide ribbon requires 40 divs, each transposed with 1 extra pixel by the Z-axis.
Also, to have the borders with dark red, the first and last 3 divs should have the color of the border, the rest the color of the ribbon.

I didn't want to write 40 CSS selectors for each side of the loops, so used another trick:

You can set CSS variables on the HTML elements by editing their inline style attribute:

<div class="ribbon" style="--gift-box-position: 0px; border-color: darkred"></div>
<div class="ribbon" style="--gift-box-position: 1px; border-color: white"></div>

The transform CSS property of the ribbon loop looks like this:

.ribbon {
  /* ... styling of the ribbon ... */
  transform: rotateX(-5deg)
             rotateY(90deg)
             /* use a CSS variable for the translate, defined in the inline style */
             translateZ(calc(80px - var(--gift-box-position)))  
             translateX(-30px)
             translateY(-110px)
             skewY(30deg);
}

(Note: I could set the border color directly in the inline style, but I had to use a CSS variable, otherwise I would've had to list all parameters for the transform also).

If you notice, from certain angles the loop is transparent and you can see the many layers of divs showing up.

Rotating the box

Just like opacity, color, or position, the transform property can also be animated in CSS.

To create an infinite animation, I had to set the keyframes:

@keyframes rotation-3d {
  from {
    transform: translateZ(-100px) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg)
  }
  to {
    transform: translateZ(-100px) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg)
  }
}

(Note: all transformed values have to be listed, even if only one changes)

Finally, I applied this animation on the gift box element:

.gift-box {
  animation: rotation-3d 20s infinite linear;
}

The CSS Christmas Calendar

This rotating 3D Christmas gift is part of my Holiday project, the CSS Christmas Calendar. I posted a new calendar item every single day from the 1st of December until Christmas Eve.

I tried different techniques each day and learned a lot - and I share the most interesting techniques in this series.

All code is available on Codepen.

Check it if you want to see other Christmassy CSS magic!

Type less! Use Pug Templates!

Johnny Fekete — Thu, 07 Jan 2021 18:28:13 +0000

While I was working on the 24 CSS artworks for my CSS Christmas Calendar I quickly realized that I would have to write <div> and </div> a million times.

Besides being very monotone, it is also extremely error-prone. It's so easy to forget closing a div, or other elements.

I wanted to save myself from a lot of unnecessary keystrokes and headaches.
That's why I decided to give Pug - a HTML templating engine -
a try.

What Is Pug?

Photo by Charles Deluvio on Unsplash

Pug.js is a HTML templating engine, which translates pug code to HTML tags.

It requires some configuration in your backend, so it gets compiled. But luckily, it's easy to get started on Codepen without any local setup.

Just create a new pen, go to the settings, and enable the Pug templating engine.

So how to write pug templates?

Here's a simple example:

.hot-chocolate
  .mug
    .mug__grip
    .mug__contents

Code from the Hot chocolate with marshmallows CSS art

that compiles to

<div class="hot-chocolate">
  <div class="mug">
    <div class="mug__grip"></div>
    <div class="mug__contents"></div>
  </div>
</div>

Let's highlight some important things here:

indentation is everything! if you start the next line under the previous, it will be a sibling HTML element. But if you press a TAB, it will be the children of it.
no need for closing tags. The proper indentation will take care of them automatically.
use your existing CSS knowledge: if something starts with a ., it will be a class. # stands for id.

Easy Peasy. Something More Complex?

So far we only worked with empty divs.

But you can add content to them:

.title Santa Claus
.description.
  a plump, white-bearded, red-suited, and jolly old man
  in modern folklore who delivers presents to 
  children at Christmastime

As you could see, multiline content needs to be indented one level, and the element definition needs a . at the end.

Changing the tag from div is just as simple:

a.link I'm a link
span.highlight I'm a highlighted text
footer I don't even have a class

Finally, you can edit the elements attributes the following way:

input(type='text' name='address' autofocus)
a(href='https://csschristmascalendar.com' target='_blank')

Mixing Pug with JavaScript

As I mentioned, Pug is a templating engine written in JavaScript.
Therefore, you can combine it with any Javascript code, and that's where it's superpower begins.

- let authenticated = false;

.login(class=authenticated ? 'hidden' : 'visible')

Here the class changed based on a JavaScript variable. Notice, how class is used as an attribute, and not in the selector.

Also, the plain JavaScript line starts with a dash - to mark that it's not a template

- let length = 10;

ul.items(style=`height: ${Math.min(length * 2, 10)}rem`)

Here the height will be a maximum of 10rem.

Finally, one thing I found quite useful is combining pug with the random() function:

.star(style=`transform: rotate(${Math.random() * 360}deg)`)

This will set a random rotate transform on the div.

Conditional Rendering

One of the cool things in Pug is that it can conditionally render elements.

Here's an example:

- let authenticated = false;

.header
  if (authenticated)
    a(href='/logout') Sign out
  else
    a(href='/login') Sign in

This example will render either the Sign in or Sign out button, depending on the authenticated variable.

Loops That Will Save Your Time

If you have to render the same block of code multiple times, loops will save you from unnecessary repetition.

Let's start with a simple case, looping through an array of items:

- const menuItems = ['intro', 'about', 'portfolio', 'contact'];

ul
  each menuItem in menuItems
    li
      a(href=`#${menuItem}`)= menuItem

This will compile to:

<ul>
  <li><a href="#intro">intro</a></li>
  <li><a href="#about">about</a></li>
  <li><a href="#portfolio">portfolio</a></li>
  <li><a href="#contact">contact</a></li>
</ul>

Notice, how I added an equal character = after the <a> tag. That to tell Pug that what comes after is a JavaScript variable, so it doesn't print the word menuItem for each link.

For loop is another one that I used heavily in the CSS arts. It repeats the same content n times.

It's important to note that for is not a Pug technique, but plain JavaScript. However, that's the beauty of it all: you can combine the two, without any problems:

.sky
  - for (var i = 1; i <= 10; i++)
    .star

This will create 10 <div class="star"></div> elements inside the sky

I used this trick in almost all items, often combined with more complex parameters:

.sparkler-light
  - for (var spark = 1; spark <= 36; spark++)
    .spark(
      class=`spark-${spark}`
      style=`--spark-rotate: ${spark * 10}deg;
        --spark-delay: ${Math.round(Math.random() * 1000)}ms`
    )

Code from the Animated Christmas Sparkler CSS art

This creates the following HTML

<div class="sparkler-light">
  <div class="spark spark-1" style="--spark-rotate: 10deg;
    --spark-delay: 359ms"></div>
  <div class="spark spark-2" style="--spark-rotate: 20deg;
    --spark-delay: 887ms"></div>

  ...

  <div class="spark spark-36" style="--spark-rotate: 360deg;
    --spark-delay: 121ms"></div>
</div>

With the for loop I could add 36 sparks rotated by 10 degrees each, and with a random delay in their animation, that - combined with CSS - resulted in this:

Animated Christmas Sparkler

Sounds Cool! What's Next?

Now you are ready to enable your Pug templating engine!

You can make more use of it by including other pug files, creating complex layouts, or even including markdown files.

Adding Pug to your projects is very easy, just follow the official documentation. It has very straightforward steps about the setup and integration.

If you just want to manually convert a Pug template to HTML, I found this online converter that did an amazing job for me, and it will certainly make it for you too.

Finally, if you need a quick overview of the most common Pug syntaxes, check this cheat sheet.
You can come back to it anytime you need a specific syntax, especially for the more complex elements.

I'd love to hear from you, and see how you implemented Pug in your projects.

Leave a comment below, and I'd be glad to answer your questions and comments.

Creating the CSS Christmas Calendar

Johnny Fekete — Wed, 06 Jan 2021 19:50:02 +0000

Creating the CSS Christmas Calendar items was a lot of fun, but before I could've even started on them, I actually had to build the calendar itself - only using HTML and CSS.

It was a lot easier than I expected, with CSS techniques such as CSS grid, flexbox or 3D transforms.

The Layout

The layout can be achieved with CSS grid, which allows us to position the calendar doors to their desired position.

<div class="calendar-grid">
    <div class="title">...</div>
    <div class="day day-1">...</div>
    <div class="day day-2">...</div>
    ...
    <div class="day day-24">...</div>
</div>

This simple HTML can be turned into the given layout by just these few CSS rules:

.calendar-grid {
  display: grid;

  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-gap: 1rem;

  grid-template-areas:
      "title  title  title  day5   day17  day15"
      "title  title  title  day11  day20  day16"
      "title  title  title  day1   day18  day12"
      "day6   day22  day14  day24  day24  day4"
      "day10  day21  day2   day24  day24  day8"
      "day3   day9   day7   day13  day23  day19";
}

and then assigning each calendar door DIV to the corresponding template area:

.title {
  grid-area: title;
}

.day-1 {
  grid-area: day1;
}

...

.day-24 {
  grid-area: day24;
}

Once the calendar-grid's display property is set to grid, I could define the grid layout:

the grid-template-columns create 6 columns with equal width (1 fraction) and the number of rows is auto., so there can be as many as necessary.
the grid-gap defines the space between the calendar doors (and title).
the grid-template-areas shows, where each item should fit inside the grid layout. (these names must match the ones assigned to the individual items, as you could see).

Notice, that the .title element takes up a 3x3 square. That is not a problem with CSS grid, it allows grid areas that take up more than one template areas.

What About Mobile?

There's no way 6 columns could comfortably fit on mobile devices, but they don't need to.

.calendar-grid {
  grid-template-columns: repeat(3, 1fr);

  grid-template-areas:
    "title  title  title"
    "day22  day3   day8"
    "day9   day18  day11"
    ...
}

With a media-query I targeted smaller resolution devices and changed the grid template column count, and the area allocation.

This time the title takes up the top 3 areas.

The Title

I wanted to create the title in the Christmassy spirit, so I used a Google font Mountains of Christmas:

@import url("https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap");

I broke up the whole title into 3 spans, applied different colors on them and rotated them individually:

<div class="title">
  <h1>
    <span class="title-1">CSS</span>
    <span class="title-2">Christmas</span>
    <span class="title-3">Calendar</span>
  </h1>
</div>

.title {
  grid-area: title;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-1 {
  color: #9c163f;
  display: block;
  transform: rotate(-10deg);
}

As with the layout, I also used a slightly different style for the title for mobile devices: smaller fonts, and the 3 spans with inline-block display, so they fit next to each other.

Creating the Doors

The doors can open, close, and show the day's surprise CSS art and its title.

To detect the opened/closed state without using JavaScript, I used a well-known trick: added an invisible checkbox, and a related label (that contains the CSS art). Clicking on the label will trigger the checkbox, and in CSS I can target it with the input:checked selector.

<div class="day day-1">
  <label>
    <input type="checkbox"/>
    <div class="door">
      <div class="front">1</div>
      <div class="back"></div>
    </div>
    <div class="inside">
      ... CSS art of the day ...
    </div>
    <div class="title-container">
      ... title of the CSS art ...
    </div>
  </label>
</div>

To hide the checkbox, simply add:

.calendar-grid input {
  display: none;
}

The label has multiple functions:

gives a height to the door/item
changes the mouse cursor to pointer
creates a perspective to the door (so there's a 3D effect when it's opening or closing)

.calendar-grid label {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
  display: flex;
  min-height: 100%;
  width: 100%;
  height: 136px;
  position: relative;
}

(there are some small changes in the height for mobile layout, where the height is calculated from the viewport's width: height: calc(85vw / 3);)

The .door div has the animation configured:

.calendar-grid .door {
  transform-style: preserve-3d;
  transition: all 300ms;
  transform-origin: 0% 50%;
  ... further styles
}

.calendar-grid input:checked + .door {
  transform: rotateY(-180deg);
}

First I set the transform-style, so the door's child elements will also preserve the 3D effect.

I set that any change should be animated in 0.3 seconds.

Finally, defined that transform animation should start from the middle of the left side. This is needed for the flip effect, so the door opens in the 3D space:

When the input is checked, I transform the rotation of the door, and the combination of this and the previously discussed styles end up with a nice opening/closing animation.

However, the door has two sides: the outside with the number, and a gray back.
To achieve this, I used the backface-visibility: hidden style. This means that if an element is rotated in the 3D space, its back is not showing up:

<div class="door">
  <div class="front">1</div>
  <div class="back"></div>
</div>

.calendar-grid .door div {
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  ... further styles ...
}

.calendar-grid .door .back {
  background: linear-gradient(to right, #384044, #2e454f);
  transform: rotateY(-180deg);
}

By applying transform: rotateY(-180deg) on the .back div, I could flip it (the same way how the opening animation flips, but this time staying in the same place, to show up as the back of the door).

Ordering the Doors

I realized that if I don't set the order of the doors, they can cover each other in a weird way, or the title of an open door can get covered by another door that is in the next row.

To avoid these glitches, I manually set the z-index on every door, starting from the bottom left corner:

.calendar-grid .day-1 {
  z-index: 16;
}
.calendar-grid .day-2 {
  z-index: 9;
}
...
.calendar-grid .day-24 {
  z-index: 14;
}

It's important to mention, that the z-index ordering differs in the mobile layout, as the doors are in different locations. Therefore they need to be actualized by targeting the days with media queries.

The Titles

Each CSS art has a title, that's a link for the individual piece's CodePen.

To make it easily noticeable that it's a link, it plays an animation to the striped background, once the mouse is over it.

The titles are inside the label, next to the door:

<div class="day day-6">
  <label>
    <input type="checkbox"/>
    <div class="door"> ... </div>
    <div class="inside"> ... </div>

    <div class="title-container">
      <a href="https://codepen.io/johnnyfekete/pen/qBaRZXV" target="_blank" title="Link to source code">
        Polar bear
      </a>
    </div>
  </label>
</div>

To trigger the entering/leaving animations, I added these styles:

.calendar-grid .title-container {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
  transition: all 400ms ease-in-out;

  ... other styles for positioning and layout ...
}

.calendar-grid input:checked ~ .title-container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

With these styles, the title is initially hidden (opacity: 0) and moved up (transform: translateY(-1rem)). It doesn't detect any mouse events.

Once the checkbox is checked, it animates the opacity and the position in 0.4 seconds.

Striped Background of the Titles

The red-white striped border is not really a border, but the background of the title, positioned behind the white background.

.calendar-grid .title-container a {
  /* this is the actual title with white background */
  position: relative;
  border-radius: 0.25rem;
  background-color: #1d3557;

  ... additional styles for the text ...
}

.calendar-grid .title-container a::before {
  /* pseudo class behind the title,
     with a negative offset in each direction */
  content: "";
  display: block;
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  z-index: -1;

  border-radius: 0.75rem;

  /* the striped background uses repeating linear gradient */
  background: repeating-linear-gradient(
    -45deg,
    #f1faee 0,
    #f1faee 0.5rem,
    #e63946 0.5rem,
    #e63946 1rem
  );
  background-size: 1.44rem 1.44rem;

  ...
}

Finally, for the animation on hover I defined a keyframe-animation to move the background's position:

@keyframes calendar-item-link {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1.44rem 0;
  }
}

This moves the background to the left with 1.44rem (exactly the same width as the width was for the stripe pattern (fun fact, I used the Pythagorean theorem to calculate this number, as the stripes are each 0.5rem wide (1rem the red + white in total).

I applied this keyframe-animation on the striped background pseudo-element:

.calendar-grid .title-container a::before {
  ... rest of the styles ...

  animation: calendar-item-link 0.6s infinite linear;
  animation-play-state: paused;
}

so it's repeating forever, without any easing (and each cycle takes 0.6 seconds).
I also paused the animation by default, and added a hover state that plays it once the mouse is over:

.calendar-grid .title-container a:hover::before {
  animation-play-state: running;
}

And there you have it ✨

Creating the calendar was quite challenging, but I also had a lot of fun with it!

I learned the lesson that of course JavaScript is useful in many situations, but it is always easy for a developer to overuse it.
This project demonstrated how much can be achieved by using CSS and HTML only.

The full project is available on Github at https://github.com/johnnyfekete/CSSChristmasCalendar/.

The code in this article focused on the main features, and in the real calendar, I used more verbose CSS with vendor prefixes where necessary.

Go ahead and give it a try!

CSS Christmas Calendar Submission

Johnny Fekete — Mon, 28 Dec 2020 21:41:50 +0000

What I built

I built CSS Christmas Calendar as an experiment, in which I published a new CSS art every day in December until Christmas.

I created every artwork individually by using different CSS techniques, and all code is publicly available, so anyone can look behind the scenes and get inspired.

I wanted to keep the project challenging, so no JavaScript has been used in the whole calendar¹.

To make the project more educative, I create a series of articles here on dev.to about the highlights of what I learned during the creative process.

Category Submission:

Random Roulette

App Link

https://csschristmascalendar.com

Screenshots

Description

For every day of the Christmas period, I created a new CSS-art, related to the Holidays. They ranged from Christmas stockings to animated toy locomotive and rotating 3D Christmas tree.
Each item got inspired by winter and Christmas, and I used various techniques to bring them to life.

Link to Source Code

https://github.com/johnnyfekete/CSSChristmasCalendar

Permissive License

MIT License

Background

I was always fascinated by CSS-art.

I saw many cool designs on Twitter, and even here on this platform; I also tried to create a few in the past - but never dug deep in the topic.

CSS was always a technology used to create pleasant UI's, maybe basic transition animations.

Then this December I realized that my CSS skills could use some polishing, so I set a challenge to myself to create a Christmassy artwork every day, using totally different styles and techniques.

This lead to CSS Christmas Calendar, in which I could learn a lot about CSS grids, 3D transformations, CSS variables and their scopes, custom gradient backgrounds, pug templating, and - of course - publishing to the Digital Ocean Apps platform.

I wanted to keep the project open and useful for others too, so made all code available, and I created this

How I built it

I was working on the project for a couple of hours every day during these 4 weeks.

I had to come up with an art idea every day, then identify its key parts and create the code.

I worked on the artworks in individual environments, and only added them to the calendar once they were polished there.

Finally, I committed my changes on Github, and then the magic happened: Digital Ocean's App platform detected my changes and automatically published it to the web, so just a few seconds later it was publicly available to everyone.

I was amazed by the simplicity of this deployment process, and the ease of configuration, so I will write an article in this series about how I set up the project in Digital Ocean.

¹ I had to use JavaScript on day 22 to play/pause a melody, but it was not used in any of the animations or graphics.

Collapsing Page Effect

Johnny Fekete — Sat, 28 Nov 2020 14:18:13 +0000

Fun with the Logout Animation

The other day I was working on my startup, Bonboarding, and wanted to spice things up
a bit so I created a collapsing page animation for the logout functionality.
Nothing fancy, some CSS transition animation. But when I posted it on Twitter,
it got viral, especially after it was retweeted by Smashing Magazine.

I was totally mind-blown by the engagement, and all the positive feedback
(this was my first viral content). Many of the people asked me to share the code,
but instead of just publishing it on github (which I did, and you can access it as
a NPM package here - available both for React or plain JavaScript) I decided to write a brief article about it.

The Not-So-Complicated Code

As a start, I wanted body's all child elements to collapse, and also all div's.
I didn't want to put animation on all elements (eg. headers, links, buttons etc)
because I felt it would make the animation too fractured.

const elements = document.querySelectorAll('body > *, body div');

To make sure that the page doesn't get scrolled, I set the position to fixed.
I also disabled pointer events, so no clicks or other events get triggered
during the animation:

document.body.style.overflow = 'hidden';
document.body.style.pointerEvents = 'none';

Finally, before dealing with the actual, I had to measure the total height
of the page (to know, how much should the items "fall" to ensure that all items
will be out of the screen at the end):

const body = document.body;
const html = document.documentElement;

const height = Math.max(
  body.scrollHeight,
  body.offsetHeight,
  html.clientHeight,
  html.scrollHeight,
  html.offsetHeight,
);

So the animation is actually super simple: just loop through the selected
elements and generate some semi-random values, then add them as CSS attributes:

[...elements].forEach(element => {
  const delay = Math.random() * 3000); // wait between 0 and 3 seconds
  const speed = Math.random() * 3000 + 2000; // speed between 2 and 5 seconds
  const rotate = Math.random() * 30 - 15; // rotate with max 15 degrees to either direction
  const moveX = Math.random() * 160 - 80; // move with 80px to either direction

  element.style.transition = `transform ${speed}ms ease-out`;
  element.style.transitionDelay = `${delay}ms`;
  element.style.transform = `translateY(${height * 1.5}px) translateX(${moveX}px) rotate(${rotate}deg)`;
});

This loop just goes through every element and assigns random values for them.

All of the elements will be transitioned downward with the height of the screen,
therefore even the ones at the top of your page will end up out of the screen at the end.

Finally, I wanted to keep one item that stayed on the screen behind the collapsing page:

There are a few important things with it:

it should be a child of the body, so it's parent element is not collapsing
it should have fixed position
to achieve the effect that it's in the background behind everything else, you can adjust the z-index

And then just ignore it and it's children elements in the forEach loop:

// Identify the logout screen that should stay in place
const logoutEl = document.querySelector('#logout-screen');

// Function that tells if an element is a
// descendant (children, grandchildren etc) of another element
const isDescendant = (parent, child) => {
  let node = child.parentNode;
  while (node !== null) {
    if (node === parent) {
      return true;
    }
    node = node.parentNode;
  }
  return false;
};

// And the updated forEach loop:
[...elements].forEach(element => {
  if (element === logoutEl || isDescendant(logoutEl, element)) {
    element.style.pointerEvents = 'all'; // this element should detect clicks
    return; // don't continue adding the animation
  }

  // ... add the animation for the other items
});

This is the basic logic, it's quite simple and all animations are handled by CSS transitions.

Here's the final code:

function collapsePage() {
  const elements = document.querySelectorAll('body > *, body div');
  const logoutEl = document.querySelector('#logout-screen');

  const body = document.body;
  const html = document.documentElement;

  const height = Math.max(
    body.scrollHeight,
    body.offsetHeight,
    html.clientHeight,
    html.scrollHeight,
    html.offsetHeight,
  );

  document.body.style.overflow = 'hidden';
  document.body.style.pointerEvents = 'none';

  const isDescendant = (parent, child) => {
    let node = child.parentNode;
    while (node !== null) {
      if (node === parent) {
        return true;
      }
      node = node.parentNode;
    }
    return false;
  };

  [...elements].forEach(element => {
    if (element === logoutEl || isDescendant(logoutEl, element)) {
      element.style.pointerEvents = 'all';
      return;
    }

    element.style.pointerEvents = 'none';

    const delay = Math.random() * 3000; // wait between 0 and 3 seconds
    const speed = Math.random() * 3000 + 2000; // speed between 2 and 5 seconds
    const rotate = Math.random() * 30 - 15; // rotate with max 10 degrees
    const moveX = Math.random() * 160 - 80; // move with 50px to either direction

    element.style.transition = `transform ${speed}ms ease-out`;
    element.style.transitionDelay = `${delay}ms`;
    element.style.transform = `translateY(${height *
      1.5}px) translateX(${moveX}px) rotate(${rotate}deg)`;
  });
}

Things to Consider

After the animation is done, all your elements will still be available in the DOM,
just transitioned out of the screen. It is not a problem if you will navigate to
another page after, but it might cause unexpected behavior if you use some
libraries that handle the navigation for you (eg. react-router-dom).

To solve this issue, I added a reset function to the component, that is triggered
on unmounting.

You can grab the whole code as an NPM package - it can be used both as a React component or as a standalone JavaScript function.

While this animation can bring some unexpected delight to your users, be careful with it.
Don't overuse, as the animation takes a few seconds each time. I recommend only using it for logouts,
or when the user deletes something in your web-app (eg. a large project, or even the user's profile).