-
Generate QR code on your machine using Node.js
posted in JavaScript on 2024-06-02 node qr javascript -
I spoke at an event last week, and on the very last slide, I had a QR code that was supposed to lead people to my contacts page. Well, it didn't. I used a service for "free" QR code generation, and the link expired. So, I learned my lesson and came up with a line that generates whatever code I need right into my terminal.
read more
-
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
read morepopstate
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.
-
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