Family, Code, Runhttps://yonatankra.com/https://yonatankra.com/busting-legacy-code-with-ai-agents/https://yonatankra.com/busting-legacy-code-with-ai-agents/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 […]Tue, 25 Nov 2025 08:05:44 GMThttps://yonatankra.com/meaningful-tests-human-hubris-vs-ai/https://yonatankra.com/meaningful-tests-human-hubris-vs-ai/What makes a test meaningful? How can tests shape better architecture? And what roles do humans and AI play? A few years ago I made a comment in a code review about a test description. That simple remark evolved into a few days’ debate that included architecture, code smells and other cool terms. How is […]Tue, 09 Sep 2025 10:41:19 GMThttps://yonatankra.com/what-can-we-learn-from-building-a-bluesky-web-component-bot-part-1/https://yonatankra.com/what-can-we-learn-from-building-a-bluesky-web-component-bot-part-1/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. […]Sun, 15 Dec 2024 16:57:50 GMThttps://yonatankra.com/how-to-remove-a-secret-token-from-your-git-history/https://yonatankra.com/how-to-remove-a-secret-token-from-your-git-history/Learn how to safely remove exposed authentication tokens from your Git repository’s entire history using BFG, a powerful cleanup tool. Understand the security risks of committed secrets and master the step-by-step process to sanitize your code repository and protect your organization’s digital assets. The Unexpected Security Alert Picture this: You’re a developer, deep in the […]Wed, 04 Dec 2024 15:42:32 GMThttps://yonatankra.com/how-to-deploy-static-websites-with-nx-github-and-cloudflare/https://yonatankra.com/how-to-deploy-static-websites-with-nx-github-and-cloudflare/A question was raised in a forum asking how to deploy static websites for free. Then, more specifically, it was mentioned they were using Nx to generate multiple websites. In this article, we will create a new Nx project with a few apps, publish our code to github, deploy all the websites to GitHub actions, […]Sun, 23 Jun 2024 12:34:00 GMThttps://yonatankra.com/implementing-your-own-ssr-server-for-web-components/https://yonatankra.com/implementing-your-own-ssr-server-for-web-components/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. […]Mon, 27 May 2024 17:11:51 GMThttps://yonatankra.com/3-reasons-why-you-should-use-conventional-commits/https://yonatankra.com/3-reasons-why-you-should-use-conventional-commits/Conventional Commits is a standardized approach to version control that enhances clarity, consistency, and collaboration among developers. We’ll understand what Conventional Commits are, explore how they work, and explain the three main benefits you gain by using them. You develop an application, a library, a microservice, or a monorepo full of services and libraries or […]Mon, 09 Oct 2023 02:16:11 GMThttps://yonatankra.com/test-drive-your-code-confrontjs-2023/https://yonatankra.com/test-drive-your-code-confrontjs-2023/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.Sat, 09 Sep 2023 14:41:46 GMThttps://yonatankra.com/how-to-setup-vitest-in-a-tauri-project/https://yonatankra.com/how-to-setup-vitest-in-a-tauri-project/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 […]Fri, 08 Sep 2023 01:48:00 GMThttps://yonatankra.com/how-can-tests-contribute-to-communication/https://yonatankra.com/how-can-tests-contribute-to-communication/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. […]Fri, 01 Sep 2023 01:05:00 GMThttps://yonatankra.com/a-tale-of-implementation-and-detail/https://yonatankra.com/a-tale-of-implementation-and-detail/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 […]Sun, 27 Aug 2023 17:40:48 GMThttps://yonatankra.com/how-to-write-unit-tests-in-rust-for-tauri/https://yonatankra.com/how-to-write-unit-tests-in-rust-for-tauri/Tauri is a desktop apps framework built with Rust for its backend and JavaScript for its front end. The first thing I like to do in a project is set up a unit tests infrastructure. I found it surprisingly easy to do it in Rust. It has become a summer tradition with my son: we […]Wed, 16 Aug 2023 20:31:31 GMThttps://yonatankra.com/how-service-workers-sped-up-our-website-by-97-5/https://yonatankra.com/how-service-workers-sped-up-our-website-by-97-5/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 […]Wed, 21 Jun 2023 15:38:56 GMThttps://yonatankra.com/from-zero-to-hero-with-github-actions-video/https://yonatankra.com/from-zero-to-hero-with-github-actions-video/My talk from JFokus 2023. I spoke about the main building blocks of a CI/CD process with github actions.Mon, 22 May 2023 20:19:00 GMThttps://yonatankra.com/live-session-3-tips-for-more-meaningful-tests/https://yonatankra.com/live-session-3-tips-for-more-meaningful-tests/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.Mon, 15 May 2023 19:19:41 GMThttps://yonatankra.com/live-coding-an-open-source-feature/https://yonatankra.com/live-coding-an-open-source-feature/How do I approach a new feature in an open source project? How do I TDD a frontend feature? What do we use for cross-browser testing? All this and more in this live coding session recording This is the recording of the first live session. I developed a feature taken from the issues list on […]Sun, 12 Mar 2023 19:43:08 GMThttps://yonatankra.com/how-to-use-github-actions-self-hosted-runners/https://yonatankra.com/how-to-use-github-actions-self-hosted-runners/How and when to run Github Actions jobs on your own machine? In a previous blog, I wrote about using your own Docker images with Github actions. One of the comments was about contacting private or custom docker registries (like Amazon’s ECR). It also mentioned Self Hosted runners as a means to run on your […]Sat, 04 Mar 2023 20:15:02 GMThttps://yonatankra.com/how-to-build-a-vivid-birthday-quiz-in-20-minutes/https://yonatankra.com/how-to-build-a-vivid-birthday-quiz-in-20-minutes/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 […]Sun, 26 Feb 2023 18:57:33 GMThttps://yonatankra.com/the-one-trick-to-writing-effective-tests/https://yonatankra.com/the-one-trick-to-writing-effective-tests/How do you know your test is effective? How do you know your test protects you from breaking changes? And how can you do TDD without doing TDD? The best distillment of TDD taken from a TDD workshop in JFokus. We all know that tests are good, right? Reduce regressions, and increase confidence. If done […]Mon, 20 Feb 2023 09:42:19 GMThttps://yonatankra.com/3-simple-habits-to-improve-your-tests/https://yonatankra.com/3-simple-habits-to-improve-your-tests/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 […]Sun, 12 Feb 2023 15:32:01 GMThttps://yonatankra.com/2-ways-to-use-your-docker-image-in-github-actions/https://yonatankra.com/2-ways-to-use-your-docker-image-in-github-actions/How to use the docker image to run Github Actions? How to use them to speed up the flows and stabilize tests? And when you should not use them? This article assumes you have prior knowledge of github actions and what Docker is. If you need a beginner’s tutorial for github actions, click here. Docker […]Mon, 26 Sep 2022 10:30:58 GMThttps://yonatankra.com/how-to-build-a-chrome-extension-that-will-make-your-facebook-posts-better/https://yonatankra.com/how-to-build-a-chrome-extension-that-will-make-your-facebook-posts-better/How to build a chrome extension, manipulate and interact with a page and publish it to the Chrome Web Store? Here’s how I created a Chrome extension that enables me to style the text in my posts and comments – and how you can do it too I post on Facebook occasionally. I guess many […]Wed, 31 Aug 2022 20:30:52 GMThttps://yonatankra.com/how-to-create-a-chrome-extension/https://yonatankra.com/how-to-create-a-chrome-extension/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 […]Sun, 21 Aug 2022 06:54:49 GMThttps://yonatankra.com/what-is-the-coupling-pitfall-and-how-to-avoid-it/https://yonatankra.com/what-is-the-coupling-pitfall-and-how-to-avoid-it/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 […]Sun, 31 Jul 2022 17:37:32 GMThttps://yonatankra.com/how-to-optimize-javascript-performance/https://yonatankra.com/how-to-optimize-javascript-performance/How can we profile and optimize our JavaScript code? How can we profile and optimize rendering in the browser? How does it all relate to the all-mighty Event Loop? This year I participated in ConfrontJS 2022. ConfrontJS is a conference for everything JavaScript based Warsaw. It is run by an amazing team who I am […]Thu, 14 Jul 2022 11:08:33 GMThttps://yonatankra.com/understanding-unit-tests-in-javascript-5-frameworks/https://yonatankra.com/understanding-unit-tests-in-javascript-5-frameworks/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. […]Wed, 29 Jun 2022 14:13:38 GMThttps://yonatankra.com/how-to-create-a-workspace-generator-in-nx-workspace/https://yonatankra.com/how-to-create-a-workspace-generator-in-nx-workspace/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 […]Thu, 19 May 2022 05:06:39 GMThttps://yonatankra.com/how-to-use-the-new-ecmascript-module-in-typescript/https://yonatankra.com/how-to-use-the-new-ecmascript-module-in-typescript/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 […]Sat, 30 Apr 2022 14:18:34 GMThttps://yonatankra.com/6-lessons-learned-from-using-playwright/https://yonatankra.com/6-lessons-learned-from-using-playwright/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) […]Wed, 27 Apr 2022 15:20:08 GMThttps://yonatankra.com/how-to-use-htmlwebpackplugin-for-multiple-entries/https://yonatankra.com/how-to-use-htmlwebpackplugin-for-multiple-entries/Here’s how to create an HTML for a specific or every entry file using Webpack and HTML Webpack Plugin. A really short explanation. Webpack Bundling in a Nutshell Webpack allows you to bundle your app from one or multiple files. It starts from a file called “entry” and follows your import or require calls. It […]Fri, 04 Mar 2022 08:04:08 GMThttps://yonatankra.com/a-good-case-for-eval-in-javascript/https://yonatankra.com/a-good-case-for-eval-in-javascript/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 […]Mon, 07 Feb 2022 21:39:49 GMThttps://yonatankra.com/custom-webpack-config-in-an-nx-workspace-the-video/https://yonatankra.com/custom-webpack-config-in-an-nx-workspace-the-video/This is my talk from nx conf 2021 on how to customize webpack config in an Nx workspace. This video walks through a tutorial I’ve written about before on How to use custom webpack configuration in an Nx project.Thu, 03 Feb 2022 16:45:28 GMThttps://yonatankra.com/fullstack-react-native-project-in-8-minutes/https://yonatankra.com/fullstack-react-native-project-in-8-minutes/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 […]Tue, 28 Dec 2021 20:12:02 GMThttps://yonatankra.com/how-to-remote-debug-and-profile-node-js-apps/https://yonatankra.com/how-to-remote-debug-and-profile-node-js-apps/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 […]Tue, 28 Dec 2021 13:36:14 GMThttps://yonatankra.com/5-tdd-lessons-when-writing-javascript-algorithm/https://yonatankra.com/5-tdd-lessons-when-writing-javascript-algorithm/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 […]Mon, 20 Dec 2021 08:22:24 GMThttps://yonatankra.com/7-github-actions-tricks-i-wish-i-knew-before-i-started/https://yonatankra.com/7-github-actions-tricks-i-wish-i-knew-before-i-started/Here are 7 tricks with github actions that changed my life (or at least my CI/CD pipeline). These tricks helped me create a more maintainable workflows code as well as boosted performance of the whole CI/CD process. If you haven’t used github actions before, you can watch my talk on how to setup CI/CD with […]Fri, 03 Dec 2021 16:14:58 GMThttps://yonatankra.com/blogging-graphics-resources/https://yonatankra.com/blogging-graphics-resources/Every blog article needs graphics. This post will help you get easily get free to use graphics for your blog posts, product or even the next family event invitation. Here’s a list of free graphics resources for you to use and how I used them. Why not to use Google Image Search If you fear […]Fri, 03 Dec 2021 10:56:26 GMThttps://yonatankra.com/yet-another-interview-question-deep-dive-intersection-of-two-arrays/https://yonatankra.com/yet-another-interview-question-deep-dive-intersection-of-two-arrays/Can we learn something practical from a pure computer science interview question? In this article we will solve an interview question and optimize it – but we will also look at a practical way to handle data in real life. The problem of finding intersecting numbers between two arrays is simple. Assuming an input of […]Wed, 06 Oct 2021 15:08:00 GMThttps://yonatankra.com/how-to-find-a-unique-number-in-a-list-of-pairs/https://yonatankra.com/how-to-find-a-unique-number-in-a-list-of-pairs/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) […]Sun, 03 Oct 2021 13:43:01 GMThttps://yonatankra.com/simple-collision-detection-with-path2d/https://yonatankra.com/simple-collision-detection-with-path2d/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 […]Mon, 27 Sep 2021 17:57:34 GMThttps://yonatankra.com/custom-json-stringify-to-classes-with-the-tojson-method/https://yonatankra.com/custom-json-stringify-to-classes-with-the-tojson-method/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 […]Tue, 21 Sep 2021 19:55:06 GMThttps://yonatankra.com/how-to-deploy-npm-modules-in-an-nx-monorepo-and-github-actions/https://yonatankra.com/how-to-deploy-npm-modules-in-an-nx-monorepo-and-github-actions/How do you maintain and deploy multiple NPM modules? How do you make sure versions do not mismatch or that nothing breaks while upgrading dependencies? And how do you deploy multiple packages at the same time in one CLI command? The problem of maintaining multiple modules and services There are two main ways to manage […]Sun, 19 Sep 2021 21:23:59 GMThttps://yonatankra.com/how-to-solve-ts2307-cannot-find-module-when-using-inline-webpack-loaders-with-typescript/https://yonatankra.com/how-to-solve-ts2307-cannot-find-module-when-using-inline-webpack-loaders-with-typescript/Trying to use a webpack raw-loader for an HTML file inline resulted in an error: TS2307: Cannot find module. Here’s how to fix it! I’m using web components a lot! I really prefer them over frameworks. They are simple, native, and easy to use. I also like typescript and webpack. Combining them is a joy. […]Wed, 08 Sep 2021 08:25:44 GMThttps://yonatankra.com/ars-blogging-how-to-start-and-manage-a-tech-blog/https://yonatankra.com/ars-blogging-how-to-start-and-manage-a-tech-blog/How to start blogging? What are the benefits of blogging and continuously sharing your knowledge? How to get your articles to an audience and who’s best to write for? Back in 2015 I told my boss our company needed a blog. We both didn’t know what I was going to write about, but it seemed […]Sun, 05 Sep 2021 21:37:12 GMThttps://yonatankra.com/deep-dive-into-an-interview-question-array-nesting/https://yonatankra.com/deep-dive-into-an-interview-question-array-nesting/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 […]Thu, 02 Sep 2021 22:33:41 GMThttps://yonatankra.com/how-to-create-terrain-and-heightmaps-using-the-diamond-square-algorithm-in-javascript/https://yonatankra.com/how-to-create-terrain-and-heightmaps-using-the-diamond-square-algorithm-in-javascript/The diamond-square algorithm is a procedural terrain generation algorithm. It makes it easy to generate Heightmaps and Terrain for games. In this article we will implement the diamond-square algorithm in JavaScript, plot our terrain on a canvas and see how a player can interact with its various terrain types. Many games are using Procedural Terrain […]Sun, 22 Aug 2021 17:29:24 GMThttps://yonatankra.com/how-to-write-a-simple-collision-detector-in-html5-canvas-and-javascript/https://yonatankra.com/how-to-write-a-simple-collision-detector-in-html5-canvas-and-javascript/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 […]Thu, 12 Aug 2021 14:44:53 GMThttps://yonatankra.com/how-to-test-html5-canvas-with-jest/https://yonatankra.com/how-to-test-html5-canvas-with-jest/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 […]Wed, 04 Aug 2021 16:35:31 GMThttps://yonatankra.com/how-to-generate-a-maze-using-javascript-and-html5-canvas-and-a-cellular-automaton-algorithm/https://yonatankra.com/how-to-generate-a-maze-using-javascript-and-html5-canvas-and-a-cellular-automaton-algorithm/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 […]Sat, 31 Jul 2021 09:01:29 GMThttps://yonatankra.com/how-to-setup-ci-cd-with-github-actions/https://yonatankra.com/how-to-setup-ci-cd-with-github-actions/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. […]Thu, 04 Mar 2021 15:20:52 GMThttps://yonatankra.com/how-to-create-a-workspace-coverage-report-in-nrwl-nx-monorepo/https://yonatankra.com/how-to-create-a-workspace-coverage-report-in-nrwl-nx-monorepo/This is going to be a short one. I’m using nrwl/nx a LOT. I’m also testing a LOT. Lately I needed to add a coverage report to one of my nrwl/nx repositories. The coverage tool I was using needed the coverage in one file, while the nrwl/nx creates the reports per library and app. So, […]Sat, 06 Feb 2021 22:50:27 GMThttps://yonatankra.com/musings-about-tests-as-documentation/https://yonatankra.com/musings-about-tests-as-documentation/This post originated from a non-english post on Linkedin. Here’s a translation of the original post: Yes, it’s very important to me that the systems I develop are covered by tests. In this approach I trust that external libraries that I use in the system have been tested. A few times I’ve read about how […]Sat, 16 Jan 2021 09:07:28 GMThttps://yonatankra.com/how-to-use-custom-webpack-configuration-in-a-nrwl-project/https://yonatankra.com/how-to-use-custom-webpack-configuration-in-a-nrwl-project/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 […]Sat, 02 Jan 2021 00:14:47 GMThttps://yonatankra.com/how-to-test-github-actions-locally-using-act/https://yonatankra.com/how-to-test-github-actions-locally-using-act/Github actions are taking a considerable part of the devops world. Developers find them super friendly for most use cases. Developing your flow can be much faster if you can run them locally. This article will show you how. In our team we are running and developing multiple github actions daily. For a while, the […]Sun, 29 Nov 2020 09:49:10 GMThttps://yonatankra.com/look-ma-my-codes-in-youtube/https://yonatankra.com/look-ma-my-codes-in-youtube/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 […]Tue, 17 Nov 2020 19:56:38 GMThttps://yonatankra.com/how-does-the-event-loop-work/https://yonatankra.com/how-does-the-event-loop-work/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.Mon, 09 Nov 2020 04:06:10 GMThttps://yonatankra.com/what-is-askql-hacktoberfest-lightning-talk/https://yonatankra.com/what-is-askql-hacktoberfest-lightning-talk/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.Sun, 08 Nov 2020 14:34:47 GMThttps://yonatankra.com/how-to-profile-javascript-performance-in-the-browser/https://yonatankra.com/how-to-profile-javascript-performance-in-the-browser/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 […]Fri, 06 Nov 2020 09:32:12 GMThttps://yonatankra.com/on-covid-19-graphql-and-askql/https://yonatankra.com/on-covid-19-graphql-and-askql/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 […]Sat, 24 Oct 2020 12:10:20 GMThttps://yonatankra.com/askql-nodejs-quickstart/https://yonatankra.com/askql-nodejs-quickstart/AskQL is a new query language that is also a programming language. I’ve written an introduction about it in the former post. In this article we will see how it can be setup in a nodejs server. Quickly setting a server To setup a server with AskQL, we first need a server. Let’s set it […]Sat, 17 Oct 2020 20:15:32 GMThttps://yonatankra.com/introduction-to-askql/https://yonatankra.com/introduction-to-askql/AskQL is a new query language that is also a programming language. Read on to see how you can actually get Star Wars with AskQL. We can query AskQL with askscript. The askscript should be very intuitive for developers, because it looks like a script! Let’s query the most common first query – hello world! […]Thu, 08 Oct 2020 05:25:09 GMThttps://yonatankra.com/form-association-and-web-components-today/https://yonatankra.com/form-association-and-web-components-today/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 […]Tue, 08 Sep 2020 14:09:27 GMThttps://yonatankra.com/handling-different-kafka-message-versions/https://yonatankra.com/handling-different-kafka-message-versions/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 […]Tue, 30 Jun 2020 19:17:52 GMThttps://yonatankra.com/writing-custom-github-actions-with-javascript/https://yonatankra.com/writing-custom-github-actions-with-javascript/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 […]Sat, 27 Jun 2020 18:25:07 GMThttps://yonatankra.com/debug-jest-in-a-nrwl-nx-project-with-webstorm/https://yonatankra.com/debug-jest-in-a-nrwl-nx-project-with-webstorm/Lately I’ve started a to migrate our 5 y/o code base into a NRWL/nx monorepo. I’d might write the process of choosing NRWL/nx as our tech of choice in a different post (write in the comments or message me so I can see if there’s any demand for that 🙂 ). Anyway, while migrating the […]Tue, 05 May 2020 07:23:03 GMThttps://yonatankra.com/measuring-used-js-heap-size-in-nodejs/https://yonatankra.com/measuring-used-js-heap-size-in-nodejs/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 […]Sat, 21 Mar 2020 05:04:53 GMThttps://yonatankra.com/measuring-used-js-heap-size/https://yonatankra.com/measuring-used-js-heap-size/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.Fri, 20 Mar 2020 06:19:26 GMThttps://yonatankra.com/layout-reflow/https://yonatankra.com/layout-reflow/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, […]Wed, 11 Mar 2020 18:05:34 GMThttps://yonatankra.com/the-event-loop-and-your-code/https://yonatankra.com/the-event-loop-and-your-code/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 […]Mon, 02 Mar 2020 20:45:38 GMThttps://yonatankra.com/viewing-the-critical-rendering-path-in-the-browser/https://yonatankra.com/viewing-the-critical-rendering-path-in-the-browser/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 […]Thu, 20 Feb 2020 12:08:27 GMThttps://yonatankra.com/memory-on-a-diet/https://yonatankra.com/memory-on-a-diet/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 […]Fri, 07 Feb 2020 07:10:02 GMThttps://yonatankra.com/reducing-network-traffic-with-the-flyweight-design-pattern/https://yonatankra.com/reducing-network-traffic-with-the-flyweight-design-pattern/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.Sun, 26 Jan 2020 14:51:22 GMThttps://yonatankra.com/optimization-patterns-in-javascript-talk/https://yonatankra.com/optimization-patterns-in-javascript-talk/My talk (in Hebrew) at Javascript Israel about Optimization Patterns in Javascript is now online. Enjoy 🙂Wed, 22 Jan 2020 20:26:50 GMThttps://yonatankra.com/collecting-garbage-in-confrontjs/https://yonatankra.com/collecting-garbage-in-confrontjs/https://youtu.be/gLj-p7gHwj8Tue, 21 Jan 2020 12:00:03 GMThttps://yonatankra.com/algorithm-against-the-machine/https://yonatankra.com/algorithm-against-the-machine/How a followup chat with a meetup attendee helped me distill a javascript memory issue? Read more about memory allocation and garbage collection.Sat, 18 Jan 2020 05:24:29 GMThttps://yonatankra.com/object-pool-use-case/https://yonatankra.com/object-pool-use-case/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 […]Wed, 15 Jan 2020 13:04:02 GMThttps://yonatankra.com/improve-performance-with-object-pool/https://yonatankra.com/improve-performance-with-object-pool/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.Fri, 10 Jan 2020 08:06:07 GMThttps://yonatankra.com/memory-allocation-and-garbage-collection-in-javascript/https://yonatankra.com/memory-allocation-and-garbage-collection-in-javascript/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 […]Thu, 02 Jan 2020 20:24:21 GMThttps://yonatankra.com/publications-on-github/https://yonatankra.com/publications-on-github/I’ve just uploaded all of my publications to github. It was super easy using https://stackedit.io/. If you want to publish something with markdown, stackedit will make your life super easy. Oh – and here’s the link to my publications repository: https://github.com/YonatanKra/publicationsSat, 28 Dec 2019 05:11:20 GMThttps://yonatankra.com/confrontjs-2019/https://yonatankra.com/confrontjs-2019/About a year and a half ago I spoke at fullstackon 2018 London. I just got off stage, and the first people to catch me were a bunch of guys who called themselves WarsawJS. Still light headed from my talk, I let them convince me to solve some JS riddle. I don’t really remember what […]Tue, 10 Dec 2019 18:45:00 GMThttps://yonatankra.com/runtime-optimization-patterns/https://yonatankra.com/runtime-optimization-patterns/My talk from CodeTalks 2019 is live. You can watch it here: In this talk I go over 3 design patterns I’ve used in production in order to enhance performance in Javascript: Dirty flag, data locality and Object pool. Some extra material about the subjects: 1. Dirty flag in cesium 2. Object pool example 3. […]Thu, 07 Nov 2019 06:52:00 GMThttps://yonatankra.com/codetalks-2019/https://yonatankra.com/codetalks-2019/Last week I’ve had the honor and pleasure to speak at CodeTalks 2019 @Hamburg. All in all it was a great experience. The organizing team was very helpful and the event itself was organized amazingly (especially considering there were about 2000 people in the conference). I also got to hang out with Yonatan and Liat […]Wed, 30 Oct 2019 06:20:00 GMThttps://yonatankra.com/publishing-a-web-components-library/https://yonatankra.com/publishing-a-web-components-library/Once upon a time, in order to create web components, one had to resort to a front end framework like angular or react (yes yes, I’ve heard the “it’s only a lib” before from all the angularists in the crowd) . Web component is one awesome piece of technology (or rather, a combination of 4 technologies). […]Mon, 01 Apr 2019 00:00:00 GMThttps://yonatankra.com/bitwise-operators-565e3ceb90cd/https://yonatankra.com/bitwise-operators-565e3ceb90cd/Bitwise Operators Bitwise operators are frequently used by the pros, usually for memory-related performance boosts. What are they, when should you use them, and how do they impact performance? Stay tuned for answers to all of this and more! This subject irked me for a long time. I saw it. I heard about it. I […]Wed, 03 Oct 2018 00:00:00 GMThttps://yonatankra.com/no-nonsense-webpack-project/https://yonatankra.com/no-nonsense-webpack-project/Or: How to use Webpack to build a project from scratch? Using webpack without fully understanding it, as if it were magic? Heard about the wonders of webpack, but got flustered by its ominous documentation? Are you from outer-space (like — a totally different galaxy) and haven’t heard of webpack at all? In any of these cases […]Thu, 22 Feb 2018 10:29:00 GMT