decaster.dev

How to kill a port that is in use

Sat, 20 Apr 2024 00:00:00 GMT

We've all seen the dreaded EADDRINUSE error. No worries though, this is super easy to fix.

{
 code: 'EADDRINUSE',
 errno: -48,
 syscall: 'listen',
 address: '::',
 port: 8080
}

There are a few ways to fix this:

tl;dr

‘npx kill-port’ is my goto, it is fast, easy to remember and does what you want it to on both all operating systems.

npx kill-port 8080

But let’s go over all the other available options in case kill port does not work for you.

Unix-based systems (Linux, macOS)

lsof and kill

lsof -ti:8080 | xargs kill

fuser

fuser -k 8080/tcp

netstat and kill

sudo netstat -ltnp | grep ':8080' | awk '{print $7}' | sed 's/\/.\*//' | xargs kill

Windows

netstat and taskkill

netstat -aon | findstr :8080
taskkill /F /PID <PID>

Using PowerShell

Get-Process -Id (Get-NetTCPConnection -LocalPort 8080).OwningProcess | Stop-Process -Force

Cross-platform tools

npx kill-port:

As mentioned before, this is a straightforward method that works across different operating systems.

npx kill-port 8080

Using Plausible Analytics in Gatsby.js or Astro.js

Fri, 02 Jun 2023 00:00:00 GMT

What is Plausible Analytics?

Plausible is intuitive, lightweight and open source web analytics. No cookies and fully compliant with GDPR, CCPA and PECR.

It is an open source project dedicated to making web analytics more privacy-friendly.

Some of the core features that makes it more privacy-first over Google Analytics are

No cookies
No tracking and collecting of personal data
Minimized data collection & secure storage

Other than these benefits it is also just super easy to set up (unless you want to use a proxy, that requires a little more work).

Their pricing is also fair, ranging from $9/mo for 10k pageviews to $169/mo for 10m pageviews. Though they do have the option to self-host, you can find the guide to self-host here: https://plausible.io/docs/self-hosting

In a nutshell, if you want to move away from Google Analytics and/or want more privacy oriented tracking, Plausible definitely is a good choice!

Alternatives to Plausible

Plausible isn’t the only privacy-first analytics service, here are some other ones:

Of these three, I have used Fathom in the past, while Fathoms design is amazing and it was a breeze to set up, they lack one major thing in my opinion. And that is the option to self host or use a proxy. But I’ll talk a little more about that later.

How to Set Up Plausible Analytics

To set up Plausible analytics all frameworks will use the same script

<script
  defer
  data-domain="yourdomain.com"
  src="https://plausible.io/js/script.js"
></script>

The only difference really is where to put them.

Gatsby.js

Add the script to your html.tsx file

Astro

I like to work with a BaseLayout.astro that wraps around pages. This file contains all SEO properties etc. We will add the script here

Working with Adblockers

To be honest, this is something I only noticed a few weeks ago, when a user uses an adblocker, chances are that your analytics are blocked as well. Why do they block them? Well some blocklist maintainers have taken a stance against these forms of analytics too.

Luckily with Plausible there is a simple workaround for this: using a proxy.

I’ll cover how to use a proxy with Vercel and Netlify in this post.

Vercel

Create a Vercel.json file at the root of your repo (same for a monorepo)

{
  "rewrites": [
    {
      "source": "/js/script.js",
      "destination": "https://plausible.io/js/script.js"
    },
    {
      "source": "/api/event",
      "destination": "https://plausible.io/api/event"
    }
  ]
}

update the script tag to use src="/js/script.js" data-api="/api/event"

Netlify

Create an _redirects file in the root of your project (in a monorepo this will be your apps/app folder)

/js/script.js https://plausible.io/js/script.outbound-links.js 200
/api/event https://plausible.io/api/event 200

Copy this _redirects file to the dist folder after the Netlify build is done, one of the ways you could do this is by updating your build command to

astro build && cp _redirects dist/_redirects

Update your script tag to use src="/js/script.js"

Conclusion

Setting up Plausible analytics is easy and straightforward, it gives you all the tools you need to get privacy-first tracking.

Hit me up on Twitter at @vdecaster if you have any questions!

Using GitHub Actions vs Jenkins

Thu, 22 Sep 2022 00:00:00 GMT

Recently I had to go through the process setting up a new CI/CD pipeline at work, and because the current workflow in our monorepo heavily depends on GitHub actions, I decided to gather some of the benefits of using GitHub Actions (GHA) over Jenkins.

Let me know on X if you would like to see more in depth practical examples of using GitHub Actions in a large monorepo.

Without further ado, enjoy my brief document on GitHub Actions, hopefully this helps you out.

Seamless Integration & Ease of Use

GHA seamlessly integrates with the GitHub ecosystem, offering unparalleled ease of use. Conversely, Jenkins, an open-source powerhouse, demands separate infrastructure setup and maintenance. The installation, configuration, and management of Jenkins are complex tasks, requiring significant time and effort. Additionally, Jenkins' knowledge tends to be siloed due to its complexity, in contrast to GHA's user-friendly maintenance and setup. GHA is built directly into GitHub, negating the need for separate infrastructure.

Self hosted runners

Both GitHub Actions and Jenkins provide options for self-hosted runners, but one distinct advantage of GHA self-hosted runners is that we can easily pick and choose when to use a self-hosted runner with a single line. This allows easy access to internally hosted services and sensitive data when a workflow run needs it.

Developer Productivity and Workflow Flexibility

GHA provides flexibility by allowing actions to trigger on a variety of events, such as push or pull request updates. This allows teams to customize their workflows according to their unique needs. For example, a 'push' event may trigger a full CI/CD pipeline, whereas a 'pull request' update could trigger unit tests. Jenkins also supports event-driven triggers but lacks the direct integration with GitHub repositories to provide the same level of granular control and responsiveness.

Contextual Understanding

Another advantage of GHA is that it operates within the GitHub context. This provides extensive metadata about the triggering event and the GitHub environment. Developers can get information about the PR it was triggered from, labels, full commit history and more. This empowers developers to create detailed, conditional workflows. Jenkins, despite being robust and extensible, lacks this innate contextual understanding and cannot provide the same level of fine-tuned control out of the box.

Security

GHA offers a robust security model, with secrets stored encrypted and available to workflows running in the same repository.

Scripting language flexibility

GHA supports a variety of scripting languages out of the box, this gives developers the freedom to write their automation scripts in the language they are most comfortable with.

Efficient Caching

GHA provides advanced caching capabilities, which can significantly speed up builds. This is particularly beneficial for mono-repos where you might need to build multiple packages per PR.

Fetch Depth Control

One major advantage of using GHA is that developers can control the fetch depth of the git checkout operation on a per-job basis. This means that if you don’t require the entire git history, a shallow clone can be used to speed up the process. This level of control is harder to achieve in Jenkins

Configuration as Code

With GHA, all the configuration details are stored within the repository rather than in a GUI, this promotes better version control, audit trails and collaboration.

Collaboration

Jenkins' complexity often limits the knowledge circle to a few engineers, making it challenging for other developers to step in and make modifications. In contrast, GHA's simplicity promotes wider developer participation in setting up and maintaining a pipeline.

How to change gatbsy favicon

Thu, 22 Sep 2022 00:00:00 GMT

Initial problem

You'd think that I would remember to change that after looking at the gatsby logo on my tab. Well actually I didn't see any favicon on the tab during any of the development 🤔

So went to check out what went wrong and here are my findings:

by default there should be a favicon.ico in the /public/static folder. This was not the case. More on that in the next point
I found a couple of posts mentioning that if you have the gatsby-plugin-sharp plugin installed (I had that one by default) then you should be seeing an icon in /src/images. That was not the case, nor was this plugin set up for that.

Okay so we have a good clue, now let's update that plugin

 {
    resolve: "gatsby-plugin-sharp",
    options: {
      icon: "./src/images/icon.png",
    },
}

Alas, no luck. This did not fix my problem. Time to dig somewhat deeper. After looking into it a little more, I found that the documentation on gatsby-plugin-sharp didn't actually have anything about icon. That led me to believe this was outdated.

Solution

After looking a little more, I found a plugin called gatsby-plugin-manifest. Finally, an answer to my problem

How to use

first off, let's install it:

npm install gatsby-plugin-manifest --save

Now add the plugin and required manifest settings in gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `The Uncommon Byte`,
        short_name: `Uncommon Byte`,
        start_url: `/`,
        background_color: `#FFF`,
        theme_color: `#FBEDE0`,
        display: `standalone`,
      },
    },
  ],
}

Cool 😎 now that we have all the formalities out of the way, let's dive into adding our favicon!

I usually use something like favicon.io to generate all my icons from one image. The fun thing with the manifest plugin is that you only need these 3 items that are generated.

android-chrome-192x192.png
android-chrome-512x512.png
favicon-32x32.png ( I renamed this to favicon.png)

Now let's add these in our manifest plugin. Inside the options object, add the following code

icon: `src/images/favicon.png`,
icons: [
  {
    src: `/favicons/android-chrome-192x192.png`,
    sizes: `192x192`,
    type: `image/png`,
  },
  {
    src: `/favicons/android-chrome-512x512.png`,
    sizes: `512x512`,
    type: `image/png`,
  },
],

Once you added this, run npm run develop again and you should be seeing your icon 🎉

Legacy

traditionally you would have to add this to your head

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />

No worries though, the plugin takes care of everything for you. In iOS 11.3 apple even added support for the web app manifest specification.

If you do not want these legacy icons to be generated you can always disable them by setting the legacy option to false in the plugin options.

TL;DR

Alright, time to wrap this up, we've basically learned that favicons might not be enabled by default with gatsby (probably also depends on how you initialized, with a template etc). And that the gatsby-plugin-manifest is a must have for all your manifest needs (including favicon!)

How to find a specific object key in jest

Sat, 03 Sep 2022 00:00:00 GMT

We’ve all been there, writing a jest test and having that one case where we want to have a very specific key in an object.

our first attempt might be

it("should redirect to correct url if id is incorrect", () => {
  const mockFn = jest.fn()

  mockRouter.query = {
    id: "id2",
  }
  mockRouter.push = mockFn

  render(<Component>I am visible</Component>)

  expect(mockFn).toHaveBeenCalledWith({
    query: { id: "id1" },
  })
})

This will throw us an error like this

Error: expect(jest.fn()) .toHaveBeenCalledWith(...expected)

Solution

Since Jest 18 we are able to use objectContaining . This makes it super easy to check for 1 or more specific keys:

it("should redirect to correct url if id is incorrect", () => {
  const mockFn = jest.fn()

  mockRouter.query = {
    id: "id2",
  }
  mockRouter.push = mockFn

  render(<Component>I am visible</Component>)

  expect(mockFn).toHaveBeenCalledWith(
    expect.objectContaining({
      query: { id: "id1" },
    })
  )
})

this test will pass.

Alternative solutions

in the case that you only have a few keys you could also use expect.anything()

this would be used like so:

expect(mockFn).toHaveBeenCalledWith({
   query: { id: "id1" },
   key: expect.anything(),
   key2: expect.anything()
})

Conclusion

there are 2 options to find a specific key in objects. objectContaining and expect.anything()