46 articles in this category.
Introduction How to eliminate legacy code? Martin Fowler and Michael Feathers both agree that lack of tests are core factor in legacy code. With AI agents, tackling legacy code and turning it into “evergreen” code is easier than ever. What is legacy code? Ah, the familiar smell of legacy code waiting to be tackled. Do […]
How to build a web component based application that integrates the BlueSky Social public API? Covered topics: TDD, BlueSky API, BlueSky bot (automation), AtProto SDK, Streaming, Web components. Introduction BlueSky is a (relatively) new Social network nowadays. It looks like a Twitter clone, only open source with much more control over the content one consumes. […]
Server Side Rendering (SSR) is a very hot topic today. What’s with React Server Components bringing all these buzz words that “I just have to implement in my project”… Let’s see what’s all the fuss about by implementing our own SSR server for web components. At Vonage we have a public project called Developer Portal. […]
On March 2023 I gave the keynote at ConfrontJS in Warsaw. I spoke about how we can become more professional as developers, my 5 tips for becoming such, and a final most-important take-home message to the audience.
Starting a project for me usually starts with setting up the testing infrastructure. The only exception is when one already exists. In this article we will learn two things. We will start from setting up vitest in the Tauri project. We will then learn how to write a test in JavaScript for a part that’s […]
Tests can improve communication and save time (and frustration). Bad tests can do the opposite. In this article, we’ll explore an example from real life of how bad tests are harmful and how good ones convey the right information. A Tale About a Title In Vivid, we needed to add a title to our button. […]
Here’s how we made our website load 97.5% faster by using service workers, how we ensure the users will get the newest version every time, and how you can do it too. Our website is more than 1 year old. It started from a few static pages and has grown to a fully-fledged documentation with […]
In 12 minutes, I shared with my colleagues three tips I used to refactor tests of legacy code. Testing the API, ensuring the tests fail for the right reason, and avoiding the coupling pitfall are exhibited in this live session.
Vivid, Vonage’s design system, is now published. What better way to celebrate Vivid’s public birthday than to build a birthday quiz? Let’s have a vivid birthday! Vivid is an open-source vanilla JavaScript design system built upon the web components technology. It holds a growing repertoire of web components that a developer can use regardless of […]
How can tests be your best documentation? What small changes can improve the contract between your code and its consumers? Learn how to improve your tests from a real-world example. Yes, we write them to ensure fewer things break before you push changes (a.k.a regression). The thing is – tests can be more than just […]
Did you know you can improve your (and your colleagues’) life by developing chrome extensions? Keren Kenzi showed how to do it in Fullstack Exchange 2022 In Fullstack Exchange 2022, Keren Kenzi gave an excellent talk about a chrome extension she built. What I like in Kenzi’s talk is that it doesn’t really matter what […]
How to avoid constant tests maintenance and regressions in your code? In this article, we will talk about a new term “the Coupling Pitfall”, what harm it is doing to your code, and a way to fix it. What are regressions and where can we catch them? Last week we had a production incident. An […]
When it comes to testing, checking a single function is different from testing a complete application at once. It helps to understand the flaws in any units of the application and allows the developers to take appropriate steps. How unit tests beneficial to you? Testing a single functionality is often referred to as unit testing. […]
What is the new standard to serve both an ECMAScript Module (ESM) as well as Commonjs in the same package? How to use it? And how to make Jest and Playwright to work with it? When developing an npm package, there are many considerations one needs to take regarding consumption. These considerations change with time […]
Or: How to generate dynamic html tags inside lit-html templates? eval is sometimes mixed up with evil. We also hear sometimes that there are cases in which it is needed. This is one such case… Notice: this article is for an old version of lit. I was notified in the comments by Justin that in […]
Setup a fully working fullstack express, react and react-native environment in 8 minutes. We will do it with Nx, express, react and react native. Lately I’ve been part of the organizing team for the Vonage TLV hackathon. A member of the team thought it would be great to create short “how to” videos that will […]
Debugging is an important skill for every developer. Here’s how to quickly setup debugging for nodejs with free tools everyone has. Introduction There are many fancy tools for debugging your application. Data dog, rookout, aspecto and sentry to name a few. They are all commercial solutions though. They cost money, and have their learning curve […]
How to develop an algorithm using TDD? In this article we will implement the Diamond-Square algorithm using TDD. This article was inspired by Uncle Bob’s blog post TDD Lesson – Terrain Generation. Well, one of the things I did during the summer was to write an article about “How to Create Terrain and Heightmaps using […]
Finding a single unique number in a list containing pairs might sound pretty simple, right? Because a one-sentence description might be misleading, let’s start with an example of an input array: [1,3,17,3,1] Given such an array, the unique number is the one that appears only once (17). The rest of the numbers (1 and 3) […]
The toJSON method allows you to tell JSON.stringify how to print out your Class. This can be pretty useful… Why Stringify Objects? The answer for that is as usual – there are many reasons. The most obvious one is to send the object to a remote service as payload to a request. Other reasons can […]
Collision detection is the basics of entities interaction on canvas. Imagine you have a Player Character (PC) that’s walking through a maze and you’d like to know if this PC bumps into a wall or can keep on going. One can argue that there’s a wall crossing potion somewhere, but let’s assume one doesn’t have […]
In this short article you will learn what you need to install in order to prepare a test environment for canvas operations with jest. After finishing the article, you will be ready for some canvas testing action! In the past few months, my kid and I been building HTML5 games. I’d might actually get you […]
Generating a random map on a canvas is fun. In this article you will learn how to generate a random map or maze on an HTML5 canvas. We will use a model called Cellular Automaton. While there are many ways to create a maze (or a map), what I’d like to create is a map […]
Continuous integration and continuous deployment are must-haves for organizations that wish to scale and deliver high quality software at a high velocity. I had the pleasure to speak about this topic in WarsawJS. In this talk, I walk through the process of using github actions to build CI/CD flows – from developer’s push to production. […]
Customizing webpack for your own needs is a powerful functionality. It allows you full control of your app’s development and deployment process. In this article we will go over how to do that in an NX monorepo. TL;DR. The steps to customize the webpack config in an NX project are here. You can see the […]
Google’s Material Web Components had a performance issue and I thought I could help. The results: 90% performance improvement in big lists removal. Here’s how I did it, and how you can duplicate it in your application. At Vonage, we are working on a unified UI library called Vivid. A core library we are using […]
On august 2020 I spoke at WarsawJS, explaining about the event loop and how it works. I hope you will enjoy this talk. If you prefer to read – here’s the blog post this talk is based on.
During Hacktoberfest, Vonage hosted an open source event. During this event I presented AskQL as well as mentored people who wanted to contribute to the project.
In order to solve performance issues, you must learn how to profile and monitor an application. How to do that using Google Chrome developer tools? How to start a recording Open the chrome browser with any website. Hit F12 OR right click on the screen and select “inspect element” In the dev tools screen that […]
How does AskQL differ from GraphQL? After writing about AskQL and how to use AskQL with nodejs, the obvious question that repeat itself was: How does it differ from GraphQL? In this article I will try to show the main benefits of AskQL by converting a simple Covid-19 GraphQL project into AskQL. The Project The […]
Recently I’ve joined a team that’s creating a UI library using web components. This is great – but it has its challenges. One of these challenges is form association behind Shadow DOM. When we create a form, we expect the following from input elements: Add the input element’s value to submission if it has a […]
I was in a job interview a while ago and one of the problems raised there was handling different message versions in the same topic. The problem was described as follows: You have a producer of version 1.0. It sends a message in a topic that gets to a consumer of version 1.0. A need […]
Lately I’ve been involved with an Open Source project called AskQL. I really like the project, try to contribute as much as I can and learn a lot in the process. One of the issues there was to enforce conventional commit names. This looked pretty easy – there must be tons of github actions in […]
In the former article, we saw how to measure the JS heap in the browser and a few use cases it can come in handy. I was asked how this can be done in a nodejs app as well. Let’s do something a bit more interesting – create a script that will measure the heap […]
Part of the tools frontend developers have in their arsenal is the performance API. Part of it is the memory object. It can be used for various causes – from debugging performance through experimenting to performance budget monitoring.
Force reflow (or Layout Reflow) is a major performance bottleneck. It happens when a measurement of the DOM happens after a DOM mutation. With this knowledge, I was able to improve performance of an app in my workplace by 75%. Read on to understand how. The browser is a wondrous thing. We give it JS, […]
The event loop is a core concept in Javascript. It is fundamental in order to understand how asynchronous code works – and how not to work with synchronous code. Let’s start with a simple example. You have some code that is dependent on some variable to exist in memory. As long as it is not […]
The critical rendering path (CRP from now on) is also known as The Pixel Path. It’s actually what happens from the moment your javascript code runs, until the moment the pixels are shown on screen. We can also call it a “frame”. This is the flow of the CRP: The colors are purposefully as they […]
In my last article, I talked about the flyweight design pattern. I mostly talked about how it can save you (and your end user) bandwidth. I failed to mention the save on memory. If we continue the example from the aforementioned blog post, let’s measure the memory consumption. A short reminder – the client code […]
Your users expect a fast and smooth experience. Sometimes what stands in the way is how long it takes to download data. The flyweight design pattern is a possible solution to help reduce bandwidth in your app.
My talk (in Hebrew) at Javascript Israel about Optimization Patterns in Javascript is now online. Enjoy 🙂
https://youtu.be/gLj-p7gHwj8
How a followup chat with a meetup attendee helped me distill a javascript memory issue? Read more about memory allocation and garbage collection.
After the Object Pool article went online, I was asked this on Facebook: What I take from here is 2 fold: The one paragraph spent explaining about use cases might not be enough – we need an example that is somewhat like real life. From the article, it might seem that Object Pool is the […]
In a former article I’ve shown the consequences of memory allocation and garbage collection. Object pool is a simple design pattern that can be used in order to solve both problems.
Javascript developers usually don’t care much about memory management. The JS engine does most of the heavy lifting for us. In this post I’m going to demonstrate how important it is to understand JavaScript memory management. Let’s take a look at an example: The two functions – buildArray and buildArray2 do the same thing. They […]