37 articles tagged with “javascript”.
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. […]
As a testing advocate, I frequently delve into “implementation details” and “public interfaces.” These terms refer to the inner workings of your API and how it’s presented to users. Rather than just defining them, let’s explore their significance through a real-world example. Witness how grasping these concepts enhances our code in practical scenarios. Once Upon […]
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.
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. […]
How to create an Nx generator? How to use it in your Nx workspace? How we converted a workspace generator into a publishable library? And how can boring be good for you? Nx is a powerful monorepo management tool. It helps you utilize one of the most powerful monorepo advantages (IMO) – standards. By standards […]
Here are 6 practical lessons learned from a production incident, ui-test coverage (using playwright) and code review. Today we had a small incident in production – one of my teammates found out a feature in one of our component doesn’t work. This is a small retro here for the value of ui-tests (using playwright, but not just) […]
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 […]
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) […]
How to create a simple and efficient collision detection between paths in your HTML5 Canvas app or game? In this article we will create a maze, allow a player to navigate through the maze and detect when the player collides with the walls. The End Goal Let’s build a simple game. The game will look […]
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 […]
The Array Nesting interview question might seem complex at first and very simple after you solve it. But sometimes, a deeper dive into it can expose some more performance optimizations that can be interesting. After this article, you’ll be able to amaze your interviewers with some new insights they didn’t think of! What is the […]
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 […]
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.
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 […]
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 🙂
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 […]
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 […]