Blog for web development
In this article, I argue that AI-assisted coding is useful but overhyped. I see real value in speeding up boilerplate and first drafts, but I also see serious risks: weaker developer fundamentals, more technical debt, shallow productivity metrics, security and licensing concerns, and growing pressure on open source maintainers. My core point is simple: AI can help me write code faster, but it…
Just recently I wanted to write a script that uploads a directory to S3. I decided to use Copilot. I have been using it for a while. This article is an attempt to prove two things: (a) that AI can't (still) replace me as a senior software engineer and (b) that it still makes sense to learn programming and focus on the fundamentals. Let's dig in.
CSS became more powerful over the years, allowing developers to create interactive components without relying on JavaScript. One such component is an animated accordion that smoothly expands and collapses content sections. In this article, we'll explore how to create a CSS-only animated accordion that dynamically adjusts its height based on the content inside.
I was continueing my exploration of React server components when I stumbled upon on this article about progressive JSON. Dan Abramov describes a technique for streaming JSON from a server to a client in chunks, allowing the client to start rendering parts of the data before the entire payload has been received. This can significantly improve perceived performance, especially for large datasets.…
I've been working on CSS tooling (on and off) since August 2013, when I wrote AbsurdJS . Later, in January 2016, I "invented" CSSX - writing CSS directly in JavaScript. None of those became a thing, but they were incredibly interesting experiments. I had some time during the holidays and decided to materialize an idea that I'm shaping the last couple of months. And so I "accidentally" wrote a CSS…
I was at ReactSummit this June and spoke with some folks from Vercel about Next.js and RSC support outside of the framework. I really wanted to try all the cool stuff but couldn’t afford to migrate my massive apps to Next.js. The conclusion was clear: it’s difficult to start using RSC without a framework. “Hold my 🍺,” I said to myself, and started exploring. I’ll admit—it wasn’t easy. But three…
This is my second year at WebExpo . I thought that after the first one, it couldn’t get any better — but the awesome team behind the event proved me wrong. Two days of inspiring talks and one day of workshop for me. Everything was perfectly planned and executed for both speakers and attendees.
This year I started running and I got really into it. And as it happens with every hobby there are some purchases involved. I invested in a new watch - Garmin Fēnix 8+ . I'm a bit of a geeky person so I started playing with it. I explored all the options, apps and a couple of watch faces. I also checked how much of an effort it is to create my own thing for it and it appears that it's not a big…
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.
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 .
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…
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.
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.
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 .
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…
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.
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…
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…
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 .…
I'm committing to posting a report at the end of each year. A report about this blog. I did the last one five years ago when this place was eight years old.
I like to write. It's not happening often, but I do. A couple of weeks ago, I finally finished my 5th book, "50 Tips on JavaScript" . I decided to use Amazon as a distributing mechanism. In this article, I'm sharing my journey. From the idea, through the writing and the publishing.
Tamo Junto is an independent animated short film by flooul animation. 2 neighbors lean on each other, turning small moments of life into great treasures. Voices by Criolo, Luciana Silveira and Emicida. Original Soundtrack By Loud+
Did you ever wondered how the call-to-action widgets work? You know, those little buttons for sharing content in the social networks. Very often they are distributed as iframes but sometimes we have to copy/paste script tags. And the instructions are "Place the following code where you want the button to appear". But if that's a script tag how it knows where to inject the button? The goal of this…
A short movie for Kent C. Dodds .
A white label app is an app that we build once and "resell" it to other people/companies. Very often we are talking about applying different themes but sometimes we have to change logic too. Such changes should be as declarative as possible so they scale well. Otherwise is more of a copy/paste exercise. In this article I want to sketch out a couple of approaches for white labeling in React…
I'm working on a personal project and I'm using the awesome Google Cloud Platform . There are so many things that you can do. All the tools that you may need are probably there. This of course comes with a price. In this article I'll share a tip how to reduce your spendings there.
Hot topic last couple of years is state management . Especially in the front-end apps. There are lots of problems and lots of solutions. One thing thought is totally ignored in this context - the JavaScript module system. I'm very often reaching out to this approach and decided to share it here.
These days I did (again) a bunch of changes in Google tag manager . This time however was more of a refactoring exercise. So, I had to prove that the tags that were placed before the refactoring exist after the refactoring. And what we programmers do in such cases - we write tests.
Back in February last year I blog on topic Email not working after DNS change . Well, I had kinda similar situation but not exactly. This time I bought a domain from Google and wanted to use an email with it. The setup wasn't obvious for me so I decided to document the process.
The router is the backbone of your application. Trust me, that's how it is and I can prove it. One of the fundamental ideas in Web is the URL (Uniform Resource Locator). Or the way of how we very often call it - "web address". No mather what you are building there is a web address which identifies your resource. The router is the front office that accepts the request to particular URL and wires it…
While I was working on Navigo an issue popped out. It was about using the library in the context of Web Dev Server where we have everything in TypeScript . And something was not ok with Navigo. The npm package wasn't exported properly and we were keep getting a does not provide an export named 'default' error. It turned out the problem is that Navigo is not exported properly as ES module (also…
I'm recently working on t w o OS libraries. Both I'm unit testing with Jest . There is some logic that leads to a warning which I'm doing with console.warn . In the unit tests this is happening quite often so I want to suppress it. Also I want to verify that it happens on the right place.
At work we have a project that uses node:10-jessie image as a base for its docker container. That image has no vi inside so I wondered how to check the content of a file. Luckily kubectl has a neat command to copy files from and to a pod.
If you are building some sort of an app, Babel is probably part of your build system. It is that thing which converts our fancy code to valid, working in a browser, JavaScript. Just recently at work I had to design a solution that swaps a class based on the environment. Or in another words, we have logic that should not reach our users. The file should be available locally and on our staging…
Last weekend I was helping a friend to deal with his "broken" iPhone XR. It was stuck on the Apple logo. No mather what we do the phone was just black and the apple shows up.
I did transfer MP3 files from my mac to my iPhone three times and every time I'm forgetting how it actually works. So I decided to document the process into a blog post.
Just recently I had to do changes in Google Tag Manager at work. It's interesting how I keep forgetting how everything works. So I finally decided to sit down and write an article about these things. If nothing else I will have a good memory snapshot to remind me what is what.
JavaScript is your behavior layer; the way to add interactivity to your sites, to provide a slick and delightful user experience, to make everything fast and easy and clean. But at some point everything changed: the tail started to wag the dog instead and development became JavaScript-first.
Just recently I started using ReactNative . I've been using React for years but this thing is a whole new world. There are tons of basic stuff which I don't know how to do. Using an SVG as a button is one of them. Find my solution below and expect more short #reactnative blog post soon.
We all know that one of the most challenging task in software development is state management. This is especially true for the JavaScript world. There are thousands of articles on this topic and so I decided to write another one 😁. I wanted to share my current thoughts on the different state types. I found that answering "What lives where?" question is far more important than the actual state…