Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

Reactive UI in 10 lines of code

posted in JavaScript on 2024-02-11   javascript react proxy

Reactivity became de-factor a standard in the last couple of years. All the major frameworks have some reactivity model implemented. One of the biggest even has the name React. In this article, we'll see how to write a simple reactive UI with just a few lines of JavaScript.

read more

A short introduction to CSS nesting

posted in CSS3 on 2023-09-16   css nesting modern

I did use Sass and Less in the past, and one of my favorite features was the nesting. Not only me but the whole community was asking about that constantly over the years. The browser vendors heard that plea, and today, we have CSS nesting.

read more

Write your own progress indicator with vanilla JavaScript

posted in JavaScript on 2023-09-16   JavaScript Node progress

Many moons ago, I was writing a lot of Flash applications. One thing was typical, and that was a progress indication of something that we were downloading. The loaded bytes of the Flash file (.swf) itself and later of some other resource the application needs. Once I started writing everything in JavaScript, this feature disappeared. In this post, we'll see how to implement it with vanilla JavaScript.

read more

I've made an Express.js based source viewer

posted in JavaScript on 2023-08-07   JavaScript Express source viewer

It's unsurprising that we all use Express.js when we need a web server. In this article, I'll show you how I built a source viewer. It's distributed as a npm package view-source and it could render the content of a directory in a nice tree-view style.

read more

q2m - a library for translating URL params to MongoDB query

posted in JavaScript on 2023-07-03   JavaScript MongoDB query

I'm not open-sourcing very often anymore, but recently I finished developing a small tool called q2m that I believe is worth sharing. It's a library designed to convert URL parameters into MongoDB queries, which I needed for my latest project, a little SaaS called Lumina CMS.

read more

AI driven open source library for measuring your web page carbon footprint

posted in JavaScript on 2023-01-14   JavaScript AI OS

Some people say that 2023 will be the year of AI. With tools like ChatGPT and DALL·E the world is definitely changing. There are different opinions on how such instruments will affect the everyday tasks of the professionals. My two cents (for now) are that those are just tools to achieve what we want quicker and more efficiently. Who knows, someday I may call myself a "prompt engineer". For the time being, though, I'm still writing a lot of stuff alone and occasionally ask ChatGPT for help.

read more

Anchor links pointing to a fragment fires History API's "popstate" event

posted in JavaScript on 2022-11-15   history popstate anchor javascript

I hit an interesting "bug" while working on a SPA application. Clicking an anchor link that points to a fragment on the page fires the History API's popstate event. This triggers some logic on my end, which was not my intent. I fixed that with a bit of JavaScript, and I had to share the snippet.

read more

Using web dev skills to test web dev skills

posted in JavaScript on 2022-10-30   javascript quiz exercise test

Last year or so, I worked on a platform where I would publish video courses. The first one is on web fundamentals (in Bulgarian), and it's almost ready. You can check it out here. But this article is not about that. It's about a platform feature I built - an in-house validator to exercise the gained HTML, CSS, and JavaScript knowledge. After each lesson, I give a task to the students, and they can work on it right in the browser. The small application became an inspiration for another project - iloveweb.dev. So, I decided to share how the validation works.

read more

Taking Wordle to the next level (case study)

posted in JavaScript on 2022-04-04   wordle dumafun javascript

I'm sure you know what Wordle is. The game got a lot of traction a couple of months ago when The New York Times bought it. I was playing it too, so I decided to create my version in my native language (Bulgarian). This is how duma.fun was born (in Bulgarian duma means word). And as usually happens with my "little" experiments, I didn't stop at just implementing the basics. I managed to translate the initial ~300 lines of code into a three months-long project. Here's why, what, and how.

read more

The tiniest presentation framework

posted in JavaScript on 2022-03-06   presentation framework html javascript

I did roughly 50 talks over the years, and for almost all of them, I used Reveal.js. I like it because it's HTML-based. I have complete control of everything and can easily publish the slides online. However, one thing bugs me every single time - the size of my content. I want to use all the available space. This becomes very important when I'm showing code to people. That's why I wrote SimPre. It's a 10KB HTML presentation framework that properly scales and positions my content.

read more
Old articles