DEV Community: Krzysztof Platis

Unveiling the truth: How Google really measures your website's performance 📊

Krzysztof Platis — Tue, 01 Apr 2025 17:23:35 +0000

I used to think Google changed my site's ranking based on Lighthouse scores it would measure every time their bot visits my site. 🚦 I was so WRONG! 🤦‍♂️ It turns out that Chrome browsers quietly gather Core Web Vitals from real users, and Google uses the 75th percentile of this data from the past 28 days to adjust rankings. In other words, 100 points Lighthouse is not your ultimate goal. Perfect in-field measurements on real users' browsers is what you're looking for.

Disclaimer: This article refers to PageSpeed Insights v5 and Lighthouse 12.4.0. When you're reading it, this info might be outdated due to newer versions

When you use Google PageSpeed Insights, you'll see two sections. One is with real users' Web Vitals data with horizontal bars (not a circle) focus only on that, look no further!

See an example report for the website https://web.dev:

The second section is not important for Google's ranking at all. It merely reflects the outcome of an on-demand Lighthouse simulation test that was just run on demand on a Google machine. This is just an artificial simulation, susceptible to many variable factors, and it can sometimes be misleading if you're unaware of the complex processes it performs behind the scenes — knowledge that, unfortunately, is not commonly shared.

Therefore, the Lighthouse test serves only as a "compass," not an exact "pin on a map" indicating your desired destination. It provides rough directions on where to go and what to improve. Additionally, the Lighthouse test is an artificial tool, much like a "compass," and is highly susceptible to "local magnetic field disturbances" (e.g., temporary poor network conditions). Its non-deterministic nature arises from the algorithm calculating two artificial scenarios—optimistic and pessimistic network call dependency graphs—and averaging them, which is sensitive to race condition edge cases based on your actual recorded network call dependency graph.

How to reveal all "Load Diff" sections in a GitHub PR 💫

Krzysztof Platis — Wed, 08 Jan 2025 23:23:44 +0000

Ever get stuck clicking through endless "Load diff" buttons on a giant GitHub pull request? It's the worst, right? While I’m all for using VSCode for reviews (seriously, check out my other post on that), if you’re sticking with GitHub, you can run a simple script in your browser's console to reveal all sections for you.

Paste the script to browser's console

The following script automates what you'd do manually - clicking all buttons to load the diffs — saving you time and effort:

// Expand all "Load diff" buttons in a GitHub PR's /files page
clickLoadDiff = () => {
  buttons = [...document.querySelectorAll('.load-diff-button')];
  if (buttons.length) {
    console.log(buttons);
    buttons.forEach((x) => setTimeout(() => x.click()));
    console.log('Load diff - clicked');
    setTimeout(clickLoadDiff, 1000);
  } else {
    console.log('Load diff - no items to click');
  }
};

clickLoadDiff();

How It Works

Find the Buttons: The script searches for all elements with the class .load-diff-button.
Click Them: It clicks each button, using setTimeout to ensure each click is processed smoothly (in a separate JS macrotask).
Repeat if Necessary: After a second, it checks if there are more buttons to click and repeats the process until there are none left.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

How I restored my deleted file in VSCode: A cool trick you should know 🔮

Krzysztof Platis — Fri, 12 Jul 2024 18:06:55 +0000

Hey there! Let me share a crazy experience I had recently. I was working on a lengthy piece of code in a new file in VSCode. After spending hours perfecting it, I accidentally deleted the file before committing it to Git. I only realized the mistake the next day. Total nightmare, right?

The Panic Moment

At first, I was in complete shock. I just stared at my screen, thinking, "Did that really just happen?". My heart started racing, and I felt this wave of panic wash over me. All that hard work, gone. Nothing in the Trash Bin. But then, I started googling whether it was possible to restore a deleted file from VSCode, and I found, to my surprise, a Stack Overflow question where someone in the comments suggested the following cool trick.

The lifesaver: Local History in VSCode

So, there's this feature in VSCode called "Local History: Find Entry to Restore." It basically keeps a history of your files locally, which means you can go back and restore previous versions even if you've deleted them! How cool is that!

How I got my file back

Open command palette
- First, I opened the Command Palette by pressing Cmd+Shift+P
Find the local history command
- Then, I pasted the phrase "Local History: Find Entry to Restore" in the Command Palette. It popped up in the list, so I pressed Enter.
Search for my deleted file
- Next, it asked me to type the name of the file I deleted. I did, and to my happy surprise, my deleted file was there!
Choose the right version
- After pressing Enter, I was presented with a list of snapshots of my file that VSCode remembered for me. I picked the most recent version and pressed Enter again.
Restore the file
- Finally, just like that, VSCode restored the contents of my file! It was like magic! I was so happy. Then it sufficed to just save this file contents on my disk with the hotkey Cmd+S and I could commit it now with Git. 🎉

The Happy Ending

Seeing my code back on the screen was such a relief. I avoided a counter-productive big loss of my work. Not only did I get my work back, but I also learned a super useful trick that I'm now excited to share with you. I hope you'll never need to use it, but... it's better to be prepared 😉

Feel free to buy me a coffee 😉 ☕️👇 Thank you! 🤗

Boost your Code Review game with custom VSCode shortcuts ⌨️

Krzysztof Platis — Wed, 19 Jun 2024 20:42:09 +0000

If you're a tech lead who spends a lot of time reviewing code and helping others, you know how crucial it is to be efficient. Over time, I've set up some handy keyboard shortcuts in Visual Studio Code (VSCode) that make my life a whole lot easier. Let me show you my keybindings.json and how these shortcuts can help you too.

Switch between Diff and Source

Switching between the diff view and the source view can be such a hassle, especially during code reviews.

These shortcuts make it super easy:

// Toggle between file diff and file source when in a diff editor
{
  "key": "cmd+ctrl+d",
  "command": "gitlens.openWorkingFile",
  "when": "editorFocus && (isInDiffEditor || editorReadonly)"
},
// Toggle between file source and file diff when not in a diff editor
{
  "key": "cmd+ctrl+d",
  "command": "git.openChange",
  "when": "editorFocus && !(isInDiffEditor || editorReadonly)"
},

How to Use: Just hit cmd+ctrl+d to switch between the diff and source views, no matter where you are. It feels like magic!

Note: Please make sure to install the GitLens VSCode extension for the shortcut to work. Otherwise, you'd need to replace the command "gitlens.openWorkingFile" with "git.openFile" in the JSON above.

Note 2: Of course, you might want to use any different shortcut, if you like! I gave cmd+ctrl+d only as an example that works for me.

Note 3: cmd+ctrl+d is already a global default shortcut for the Mac's native action "Lookup Dictionary". To disable it, see instructions in https://apple.stackexchange.com/a/29398.

Navigate Changes in File

When you're deep into a code review, navigating through changes efficiently is key. These shortcuts help you jump between changes within a single file effortlessly, without needing to manually scroll to the next change:

// Go to the next change in the compare editor
{
  "key": "ctrl+cmd+down",
  "command": "workbench.action.compareEditor.nextChange",
  "when": "textCompareEditorVisible"
},
// Go to the previous change in the compare editor
{
  "key": "ctrl+cmd+up",
  "command": "workbench.action.compareEditor.previousChange",
  "when": "textCompareEditorVisible"
},

How to Use: Use ctrl+cmd+down to jump to the next change and ctrl+cmd+up to go back to the previous change in the compare editor. This makes navigating through changes in your code reviews quick and efficient.

See Tree of all Changed Files

During code reviews, I often need to switch between the tree of changed files and the tree of all files in the repo. This shortcut makes that transition seamless:

// Focus on the active pull request
{
  "key": "shift+cmd+l",
  "command": "prStatus:github.focus"
}

How to Use: With the official GitHub Pull Request extension installed, press shift+cmd+l to quickly focus on the active pull request. This keeps your workflow smooth and uninterrupted. When you need to switch to a tree of all files in the project, you can use the default shortcut shift+cmd+e.

Mark File as Viewed

Once you've finished reviewing a file, you want to mark it as viewed. Normally it requires clicking a tiny checkbox in VSCODE with a mouse, but it's much faster to do it with a smart keyboard shortcut. Here's how to setup it:

{
  "key": "cmd+ctrl+c",
  "command": "runCommands",
  "args": {
    "commands": ["pr.markFileAsViewed", "prStatus:github.focus"]
  }
}

How to Use: Press cmd+ctrl+c to mark the current file as viewed. Moreover, your focus will now move to the pane of all changed files, allowing you to quickly navigate to the next file by pressing the Arrow Down and Enter. This small tweak can significantly streamline your review process.

Quick GitHub Link for Current Line

I share specific lines of our codebase from GitHub all the time. These shortcuts make copying and opening GitHub permalinks a no-brainer:

// Copy GitHub permalink
{
  "key": "shift+cmd+c",
  "command": "issue.copyGithubPermalink"
},
// Open GitHub permalink
{
  "key": "shift+cmd+x",
  "command": "issue.openGithubPermalink"
}

How to Use: Press shift+cmd+c to copy a permalink to your clipboard and shift+cmd+x to open a permalink right in your browser. So simple and fast!

Wrapping Up

These custom VSCode shortcuts have saved me tons of time and made my work a lot smoother. Whether you’re reviewing code, sharing GitHub links or switching between diff and source file of your own changes, these shortcuts can seriously up your game. Give them a try and see how much easier your workflow can get!

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Clear Site Data in Chrome - quickly, without touching your mouse 🗑️

Krzysztof Platis — Tue, 09 Apr 2024 16:32:53 +0000

To Clear Site Data in Chrome quickly, without using your mouse:

Press F12 to open Chrome Dev Tools.
Press Cmd+Shift+P to open the command palette.
Type "Clear site data"
Hit Enter to execute. 🎉

This will clear the all the localStorage, sessionStorage, cookies, service workers, etc. for your current site.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

ng update @my/lib@version - Which migration schematics will be executed? 🤷

Krzysztof Platis — Sun, 04 Feb 2024 08:32:35 +0000

The command ng update @my/lib@version downloads the specified version of the library and launches all schematics listed in its migrations.json that have an appropriate property of "version" within the semver range from >installedVersion to <=targetVersion.

Example

For instance, consider the following conditions:

The locally installed version of @my/lib in my project is 1.1.0.
The latest published npm version of @my/lib is 4.8.9.
Now, when we run ng update @my/lib (or ...@my/lib@4 or ...@my/lib@4.8 or ...@my/lib@4.8.9, it doesn't matter),
and the file migration.json of @my/lib contains migrations for the "version" 2.0.0 and 4.5.0:

{
  "schematics": {
    "migration-v2": {
      "version": "2.0.0",
      "factory": "./migration-v2#migrate",
      "description": "Migration for v2.0.0"
    },
    "migration-v4.5": {
      "version": "4.5.0",
      "factory": "./migration-v4_5#migrate",
      "description": "Migration for v4.5.0"
    },
  }
}

...then the following migrations will be executed, in ascending order of version:

Migration for v2.0.0
Migration for v4.5.0

This is because they fall between the currently installed version (>1.1.0) and the target version (<=4.8.9).

Note: If we were to run ng update @my/lib@ with the target version lower than 4.5.0, for example, ng update @my/lib@3, only the following migration would be executed:

Migration for v2.0.0

However, the Migration for v4.5.0 would not run.

Angular CLI source code analysis

Here's a proof in the source code of the Angular CLI:

If the "version" field from migrations.json belongs to the appropriate semver range, then this migration is launched (see source).
The appropriate semver range means something between >fromVersion and <=toVersion (see sources: executeMigration() and invocation of executeMigration()).
The fromVersion and toVersion respectively mean: installed.version and target.version (see source).

Therefore, all migrations between >installed.version and <=target.version are launched.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

My essential tools for authoring Angular code

Krzysztof Platis — Tue, 10 Oct 2023 10:43:22 +0000

VSCode extensions

Angular Language Service - for code completion and error checking in the source code
angular2-switcher - for easy switching in between HTML, TS, SPEC files of the same component/service with 3 simple hotkeys
Code Spell Checker - to aviod typos in the codde 😉

VSCode Settings

Open to VSCode settings.json file (how: open command palette with Cmd+Shift+P then type: Preferences: Open User Settings (JSON)

and then add the following settings:

  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.addMissingImports": true
  },
  "editor.formatOnSave": true,

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Mastering Chrome DevTools: Edit production code on-the-fly in your browser ✏️

Krzysztof Platis — Fri, 21 Jul 2023 16:44:10 +0000

Chrome DevTools allows not only for pretty formatting and debugging the minified JS code of any production website, but also (which was surprising to me!) gives you ability to edit this production code in your browser on the fly! You can apply your custom local edits to any source JS file and after the next page refresh your code will run instead of the default one. You just need to enable the hidden feature of Devtools, called local overrides. Thanks to that, you can not only conveniently inspect the production code of any website, but also comfortably even try out an idea of a possible bugfix in this production code without a need to deploy the updated version of code, but just making edits locally in your browser!

Edit JS code locally in your browser!

To edit any file of any website, you need to first make sure you have enabled the feature of Chrome DevTools called local overrides. Here's how to do it quickly: in DevTools window open the command palette by pressing the hotkey Cmd+Shift+P (similar to what you would do e.g. in Visual Studio Code) and then type Enable override network requests, and hit Enter. It suffices that you enable this feature once.

Don't worry when you see that your Network tab now shows a warning sign "⚠️" - it only indicates that some of the files might be now replaced by your customized versions:

Then you can edit any source file of the website! Just right-click at any source code filename and from the opened contextual menu please select the option Save for overrides.

You might notice a small pink dot near the icon of this filename - it's signaling that your local version will take precedence over the default source code (but only after the page refresh).

So now you can edit this file and save your changes many times with pressing the hotkey Cmd+S. And after you refresh the page, your customized source code should be used instead of the default one! This way you can for instance conveniently try out an idea of a possible bugfix in the production website, without a need to deploy a new version of code, but just make edits locally in your browser!

Notes

The same technique can be applied to override also HTML files, not only JS ones.

For more, see the official Chrome DevTools docs on the Local network overrides.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Appendix: Pretty print and debug minified JS code

Pretty print the minified JS code

Open the Chrome DevTools' tab Sources and in the left hand pane open a file that interests you. Then click the icon with curly braces { } in the bottom left corner of the central view with the source code.

After clicking this button, the source code should get a nice formatting and lines indentation, to allow to better readability of the code:

Inspect and debug the code

Now you can conveniently set anywhere a breakpoint, which will stop the execution of the code in a line that interests you, allowing for inspecting deeper the context, values of variables, the other functions higher in the stacktrace, etc.

Here's a screenshot of setting a breakpoint:

The screenshot below shows how the execution was paused at this line after refreshing the page (and therefore rerunning the code). Please also note in the right-hand pane, that you can inspect values of all Local variables while the execution stopped at this line

When you scroll down the right-hand pane you will be able to also review the Call Stack of the currently paused code. Thanks to that you can understand which higher functions led to eventually executing the currently paused line of code.

Moreover, inside the Call Stack section you can also click any of those higher functions' names and then you will see the source code of the higher function. For instance below you can see the body of the 3rd function in the Call Stack which I clicked (anonymous):

While having this higher function's body opened, we can scroll up the right-hand pane and inspect Local variables from the context and time of this higher function's invocation!

That's it, I hope you find it useful! Happy debugging and editing the production code 😉

The importance of order in Angular Dependency Injection providers 🔀

Krzysztof Platis — Mon, 10 Jul 2023 09:42:18 +0000

The order of providers in Angular Dependency Injection matters.
If you provide a custom implementation "before" the default implementation is provided, then the default implementation will take precedence. The "last provided" wins. Angular traverses the tree of modules, grabs all providers and flatten them all to one list. In case of conflicts, then the last provided in the list wins.

Angular traverses modules tree, starting from the root module (often named AppModule):

first are providers from imported modules (depth-first), e.g. imports: [SomeModule, ...]
then providers from static methods of imported modules, e.g. imports: [SomeModule.forRootOrWhateverMethodName(), ...]
then providers from the currently analyzed module providers: [...]

As ab evidence, see the example Stackblitz.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Angular SSR v16: saying goodbye to a sneaky trick - macrotask wrapping for HTTP calls 👋

Krzysztof Platis — Mon, 03 Jul 2023 06:41:11 +0000

Since version 16, Angular SSR no longer counts outgoing HTTP requests as macrotasks in Zone.js, but uses an internal http interceptor function instead. As a consequence, if you used a technique of tracking NgZone macrotasks for debugging hanging SSR, it will no longer reveal long pending HTTP requests for you. But the good news is you can still implement yourself a custom HttpInterceptor for counting pending requests.

Before Angular 16 - wrapping HTTP requests as macrotasks

Before version 16, Angular created in Zone.js an artificial macrotask named ZoneMacroTaskWrapper.subscribe for each outgoing HTTP request in the special HttpHandler. Angular completed manually such an artifical macrotask when the HTTP request completed. Thanks to this trick, Zone.js treated every pending outgoing HTTP request as a macrotask, even though by nature HTTP requests are not JavaScript macrotasks.

The observable ApplicationRef.isStable, which is used internally by Angular SSR to hold the serialization of HTML until the app is stable, depended directly on the NgZone.onStable, which emitted only when there were no pending microtasks and macrotasks (so also when there were no pending outgoing HTTP requests).

Since Angular 16 - no more wrapping HTTP requests as macrotasks

Since version 16, Angular removed the trick of wrapping HTTP calls as Zone.js macrotasks. And Angular came up with a new, complementary solution for waiting until HTTP requests complete. Now Angular tracks pending HTTP requests with a special new class InitialRenderPendingTasks which counts every pending http call via a new Angular's internal http interceptor function.
Now ApplicationRef.isStable takes into account not only the observable NgZone.onStable, but also InitialRenderPendingTasks.hasPendingTasks.

So the old behavior is preserved - SSR is waiting for outgoing HTTP requests to complete. But it's just achieved differently now, with the help of the new class InitialRenderPendingTasks.

Side note: the new class InitialRenderPendingTasks is used also by Angular Router to ensure waiting for the initial navigation to complete.

How can I track outgoing requests in SSR?

You can write a custom Angular HTTP_INTERCEPTOR, which will track pending outgoing requests. The following is an example implementation of such a custom interceptor:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

interface RequestDetails {
  url: string;
  requestTime: Date;
  responseTime: Date | undefined;
}

@Injectable()
export class DebuggingInterceptor implements HttpInterceptor {
  private requests: RequestDetails[] = [];

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.requests.push({ 
      url: request.url,
      requestTime: new Date()
      responseTime: undefined
    });

    return next.handle(request).pipe(
      tap((event: HttpEvent<any>) => {
        if (event instanceof HttpResponse) {
          requestDetails.responseTime = new Date();
        }
      }, (error) => {
          requestDetails.responseTime = new Date();
      })
    );
  }
}

Note: the above implementation is just an example and can be enhanced by adding more request's details, for example the response HTTP status.
Note 2: Such an interceptor can be also implemented when using Angular versions prior to 16.

ZoneJS still triggers change detection on HTTP request completion

Even though HTTP requests are no longer wrapped as artifical macrotasks in Angular's internals, the change detection in Angular app still will be triggered after an outgoing request completes. It's possioble, because Zone.js tracks also native event listeners (including native event listeners responsible for outgoing http request) and then triggers NgZone.onLeave(), which triggers an internal function checkStable(), which triggers emission of NgZone.onMicrotaskEmpty (btw. I wonder why it wasn't named NgZone.onTaskEmpty, because it's not only about microtasks, but also event listeners), which triggers emission of ApplicationRef.tick(), which performs the change detection.

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Self-Reg and Spotify: How I automated my music listening experience 🎵

Krzysztof Platis — Mon, 17 Apr 2023 22:07:12 +0000

Are you tired of spending too much time searching for the perfect Spotify playlist for your current mood? I have found a solution that has saved me time and frustration.

The struggle

As someone who enjoys music, I have over 100 Spotify playlists in my favorites list. However, when it comes to choosing the right playlist for my current level of alertness, I often found myself struggling to find the perfect one. Sometimes the music was too soft, other times it was too loud. I needed a way to instantly search and find a playlist that would match my current level of alertness, so it would help me in my activity rather than irritate me.

The solution

My solution was to create a database in Notion of all my playlists and classify them based on their level of alertness: low, attentive, reactive, or active. Whenever I wanted to listen to music, I would ask myself a quick question about my current level of alertness, and then I would open my database, filter by the chosen alertness type, and pick a random playlist.

But why stop there? I wanted to make this process even more efficient. So, I created an iOS shortcut that would ask me to choose one of the four given alertness types. The shortcut would then connect in the background to my Notion database, get one random playlist from the chosen alertness type, and open Spotify to play it.

Now, with just a few clicks, I can listen to the perfect Spotify playlist that matches my current level of alertness. No more wasting time searching for the right music, and no more frustration with mismatched playlists. This solution has made listening to music a more enjoyable and efficient experience.

I'm aware my solution is very specific. But it's a nice example of optimizing your life. And I hope it will inspire you.

Levels of alertness by Dr. Stuart Shanker

Dr. Stuart Shanker's book "Self-Reg" discusses the importance of recognizing and responding to different levels of alertness in order to effectively self-regulate and manage stress. Shanker emphasizes the significance of understanding our own levels of alertness and recognizing when we are becoming dysregulated. By doing so, we can take steps to restore balance and promote well-being.

In Shanker's model, there are five levels of arousal or alertness, which include low arousal, attentive arousal, reactive arousal, active arousal, and hyper-arousal. By classifying my playlists according to the first 4 levels, I am more aware of my current level of alertness and can quickly find the perfect playlist that matches my mood.

Summary

This process has been a game-changer in my daily routine, and I hope it inspires you to create your own system that matches your needs and preferences. Happy listening! 🎧

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌

Auto-add missing imports on file save in VS Code ✨

Krzysztof Platis — Fri, 17 Mar 2023 17:04:00 +0000

Do you spend precious time manually organizing imports and fixing missing ones while coding in VS Code? There's a faster and more efficient way. By enabling a simple but powerful feature in the settings, you can automate these tasks upon file save and significantly boost your coding productivity. Let's explore how this feature works and how you can start using it today.

Auto-add missing imports on file save

Using the Command Palette (CMD + SHIFT + P), open the option Preferences: Open User Settings (JSON):

Then add the following settings to your opened User settings.json:

  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.addMissingImports": true
  },

Note: When there is more than one possible suggested import path for a token, such a missing import won’t be auto-added.

Keyboard Shortcut to add missing imports

However, you can configure a keyboard shortcut to auto-add missing imports (and it can handle a situation when many import paths are suggested; e.g. choose the first one by default).

Using the Command Palette (CMD + SHIFT + P), open the option Preferences: Open Keyboard Shortcuts (JSON):

And add the following setting to your opened keybindings.json:

  {
    "key": "ctrl+s",
    "command": "editor.action.sourceAction",
    "args": {
      "kind": "source.addMissingImports",
      "apply": "first"
    }
  }

and then press [CTRL + S]

Save the file!

Before 🙄

After 🤩

Disclaimer

Please expect that sometimes VS Code might suggest using a not your preferred path (e.g. not from the proper relative file or from a proper sub entry point @package/xxx/yyy, but from an index.ts barrel or from absolute directory - which depending on your setup might cause compilation errors later on). So please be vigilant with VS Code resolving import paths for you. 😉

If you really feel like buying me a coffee

... then feel free to do it. Many thanks! 🙌