Yonatan's dev blog

Transforming an Arcade Machine into a WFH-friendly Grafana Dashboard

Like a lot of people, in the past couple of months I've been working from home. One of the things I missed about working from an office is having a dedicated monitor that cycles through graphs showing the latest metrics about the services that our team owns. One day as

code analysis

Slaying God-Classes with "AST Scout", a code structure visualization tool

A few months ago I worked on a legacy Typescript project where having Class files with more than 1,500 lines-of-code was quite common. A single source-file with this many lines-of-code is sometimes known as a "God Class" because it is capable of doing too many different things.

automation

Monitoring unused CSS by unleashing the raw power of the DevTools Protocol

Update: Check out headless-devtools, a library for automating DevTools actions from code by leveraging the DevTools Protocol Chrome DevTools is the go-to analysis tool for understanding what's going on under-the-covers of your app and conducting perf-audits. As you are interacting with the site like a real user would, you can

code analysis

Writing a custom ESLint rule to spot undeclared props hiding in plain sight

This post aims to give a walkthrough of how to design a custom ESLint rule without any prerequisites. However, some experience with Javascript Abstract Syntax Trees (ASTs) will be helpful. Consider watching my talk about getting started with ASTs. ESLint is a fantastic linting tool to help enforce your team's

performance

Extracting actionable insights from web perf optimizations

This was originally posted at the 2015 Performance Calendar. A lot of different factors can affect a web page's performance. For this reason, truly effective Web Performance Optimization starts with identifying the most significant perf bottlenecks of your site. This is usually done with tools like DevTools, WebPagetest, PageSpeed Insights,

javascript

Raiding memory leaks in the Pyramid of PrevObject

A while ago I found that interaction with a component in our site results in many detached dom elements. At first glance, it wasn't clear from the code what was causing it. After some research I realized that the detached dom elements are still referenced by prevObject- an internal property

performance

Releasing "Chunk Scatter", an HTTP chunked encoding analysis tool

Update: I presented a talk about this tool at the 2016 Reversim Summit. Slides can be found here. "Chunk Scatter" (github, demo) is a simple tool I wrote for analyzing HTTP responses that use chunked encoding. It plots each chunk on a scatter graph to help visualize when

javascript

Prototype's real world usage: optimizing memory usage

One of the first things you learn about Javascript when you start delving into the language is that it doesn't support classical inheritance, but rather prototypal inheritance. The topic of prototype-based inheritance is the subject of many online articles and interview questions. Usually examples used to explain it involve Employees

Announcing "Food Announcer", a food delivery robot

Last month our company had its yearly Hackathon. The hardest part of any Hackathon is, of course, to choose what project to take on. I knew I wanted to break out of my comfy web development bubble and mess around with hardware. A coworker suggested I set out to find