DEV Community: mal

Open Source (tsParticles) Helped me Finish a Years-Long Project Idea

mal — Tue, 28 Jun 2022 18:31:20 +0000

I had a simple, silly idea a few years ago: to program a robot with a function to help you feel a bit better. Before you get carried away, I’m not talking about a physical robot here – just a web page. The idea is, you would go to this web page and would ask, “am I good enough today?” The page would answer, “Yes!”

I had a clear vision for how I wanted the page to work. First, I wanted to display a button that prompted the user to ask if they were good enough today. Once the visitor pressed the button, I wanted them to have a celebratory moment, powered by some on-screen confetti.

In 2017, when I first had this idea, the state of confetti libraries was not as comprehensive as it is today. I searched for “javascript confetti” before writing this article, in 2022, and I was able to find several libraries – even some that are devoted exclusively to rendering confetti (tsParticles does more than just confetti). When I had searched years ago in 2017, I only found one library, and it required a rather expensive licensing fee, which I was unwilling to pay at the time. I reasoned that the cost of the confetti library was too high for the project that I had in mind, and I didn’t have the bandwidth at the time to build the effect myself. So I put the project down.

…Until 2022.

Throughout 2021 and 2022, while I was using dictate.life to catch up on dev.to articles daily, I came across a library called tsParticles. After reading a couple of the product updates that the author would post on dev.to, I suddenly realized that I could finally finish the project.

So, I built it, and streamed it live on Twitch. And I’d like to share it with you:

Am I Good Enough Today?

Thanks for reading! I hope you enjoy the tool and the story, and I hope it inspires you to work on your own projects! And of course, thank you to the creator of tsParticles, Matteo Bruni, and the tsParticles contributors!

tsParticles: https://particles.js.org/

Live coding this project on Twitch (NSFW): https://www.twitch.tv/videos/1447226927

How to Deploy to Kubernetes Using Gitlab CI

mal — Wed, 11 May 2022 11:21:15 +0000

Automatically deploy new revisions of your app to your Kubernetes cluster with the push of a button!

If you are not familiar with Kubernetes, I hope that this article can give you a deeper understanding of the power of Kubernetes. Regardless of your skill level, I hope that reading this article inspires you iterate on your infrastructure process.

This article assumes that you already have a Kubernetes cluster with a working Kubeconfig for a user that has permissions to access the cluster. It also assumes that Gitlab’s servers can access your cluster. We will cover these topics, including how to implement Kubernetes Role-Based Access Control in a future article. Let’s get started:

Prepare and download your Kubeconfig

The Kubeconfig is a file that grants access to your Kubernetes cluster. The user that the Kubeconfig describes should have permission to update the deployments in your cluster.

Upload your Kubeconfig to Gitlab

The first step is to provide Gitlab with your Kubeconfig.

Navigate to your project or group CI/CD Settings:

Variables can be configured both at the Group and Project levels

Click Expand on the Variables section:

and then, click the Add Variable button to reveal the following dialog:

The key MUST be KUBECONFIG

Make sure that the Type of the variable is set to File.

Then, copy the contents of your Kubeconfig into the Value input box and finally, click the Add Variable button.

Create the Deploy Step

Once you’ve added your Kubeconfig as a CI pipeline variable, you’re ready to update your .gitlab-ci.yml with a new deploy stage. Below is an example:

deploy:
  stage: deploy
  image:
    name: bitnami/kubectl:latest
    entrypoint: [""]
  when: manual
  script:
    - kubectl set image deployment/my-deployment my-deployment=my.registry.com/my-image/$CI_COMMIT_REF_SLUG

Let’s explore a few parts of this pipeline step:

image

This definition uses bitnami’s kubectl docker image. I do not want to maintain my own kubectl docker image, and bitnami’s kubectl image is the most reputable one I’ve found in my research. The info page on bitnami’s image is here: https://bitnami.com/stack/kubectl/containers

By default, the image will run kubectl, which will create unnecessary noise in our pipeline log. Thankfully, gitlab lets us override this behavior by specifying the entrypoint as an empty set [""]. This way, no command will be run when the image is run.

when

This definition uses when: manual, which will pause the pipeline when it reaches the deploy step. Normally, the pipeline step would automatically execute, but with the when keyword, Gitlab will show a clickable play button that will start the job:

You may want to remove the when: manual declaration when creating a pipeline to deploy to a test or staging server.

script

The script section of the pipeline step is where the image switch is performed – we call the kubectl command and set the image of a deployment named my-deployment to my.registry.com/my-image/$CI_COMMIT_REF_SLUG. These values should be changed to reflect your build process.

The deployment name, specified in deployment/my-deployment, references the metadata.name property of your Kubernetes deployment. The image set command, which also uses the name my-deployment, references a different value, spec.template.spec.initContainers[].name, or spec.template.spec.containers[].name.

Bonus: Change Multiple Images in One Command

You may have noticed that the set command above only contains the name of one image to change, and also that a Kubernetes deployment definition is allowed to have multiple images, specified through containers or initContainers. The kubectl command supports setting multiple images in one command by separating the images to be set by a space. I find this approach to be more clear and efficient than running multiple commands in the pipeline stage:

kubectl set image deployment/my-deployment my-deployment=my.registry.com/my-image/$CI_COMMIT_REF_SLUG my-other-deployment=my.registry.com/my-other-image/$CI_COMMIT_REF_SLUG

That’s it! Your Gitlab CI Pipelne should now be equipped with a new button that lets you deploy new revisions of your app! 🥳

Authentication vs Authorization: What’s the Difference?

mal — Tue, 19 Apr 2022 16:07:11 +0000

They sound similar, but they’re fundamentally different.

So, what’s the difference between the two? Consider boarding a flight: in order to board the plane, you’ll need to successfully make it through the gauntlet of the airport’s authentication and authorization procedures. It’s worth noting that the processes in an airport often combine both authorization and authentication together, but we’ll do our best to illustrate the difference through two specific examples.

The first part of the process is to enter a queue for the security line. After entering the correct airport terminal building, you’d locate your gate, walk to it and begin the first of the two steps:

Authentication

The very first step that occurs, just before going through security at an airport, is authentication. You furnish your identification and boarding pass and present it to the line attendant. The attendant scans your boarding pass and your identification and ensures that you are who you are.

At this point, the agent is checking to ensure that your boarding pass is valid and that your form of identification is valid, both of which are are required to prove that you’re the same person that is on your identification and boarding pass.

The goal of this step is to ensure that you are who you say you are, and the TSA uses multi-factor authentication to perform this task; they inspect your supplied form of identification combined with your boarding pass. At this point, the folks at the airport don’t know whether you’re able to sit in economy class, business class, or first class, or whether you’re able to access the executive lounge – but they know that you are who you are and that you’re able to be in the airport.

This step is like logging in to an application – submitting your boarding pass and identification is like submitting your username and password – once submitted and verified, the application can know that you are indeed who you say you are. The application doesn’t know what you’re able to do yet – if you’re able to simply make posts or if you can also access an admin area – but it knows that you’re a valid user.

Once through the authentication step and through security, you walk over to your gate until the airline employees begin to announce over the loudspeaker, “now boarding for flight 123 to Honolulu….”

Authorization

At your gate, you listen to the announcer begin to call the passengers by group. “Those in first class can now begin boarding.” This process can be thought of as authorization. For example, if you stand in that line and don’t have a first-class ticket, you’ll be denied entry until it is your turn. You’re authorized for one seat, and that seat does not grant you the ability to enter the line for the plane at that point. The attendant doesn’t need to know who you are at that point – they can simply look at your boarding pass, which also has your seat row and number on it – the required information for this step.

The seat number indicated on your boarding pass also does not allow you to sit in the front of the plane. If you try to sit in a different seat, especially if you don’t have a first-class ticket and you try to sit in first class, you’ll be asked to leave and to sit in your seat. This can also be thought of as the process of authorization. The flight attendants are ensuring that those with authorization to do so can sit in the upgraded seats.

Similarly, your application might have the concept of upgraded seats, or perhaps an admin area, which would be akin to an airplane’s cockpit. Only authorized users should be able to access those areas. Furthermore, let’s consider a situation where you have a highly privileged account for Service A and want to use that account to log into Service B. You probably would not want to give Service B permission to perform the highly privileged functions from Service A. You might want to only give Service B access to your email address. That would be authorization’s concern. This would be like a pilot boarding a plane as a civilian – they wouldn’t have access to the cockpit because they wouldn’t be there in a formal capacity and wouldn’t have authorization to enter.

Why is Authorization and Authentication Important?

A web application, when faced with a request, needs to answer the question “what is the true identity of the actor making this request?” This question is arguably the most important question that a web application has to answer and drives the authentication process.

Similarly, modern web applications demand granular access to resources. Our modern culture encourages sharing and sharing demands limits to sensitive resources. for example, if you use facebook to sign into another site, you probably wouldn’t want to authorize that site to read your DMs. The OAuth protocol allows applications to define those permissions in a way that’s clear to everyone involved – the application developers and the users. OAuth is the web’s version of the TSA – but far more effective.

It’s worth noting that the processes of authentication and authorization in web apps, like the same processes in an airport, are often deeply connected. Authorization often doesn’t make sense without authentication. Authentication is useless without authorization. Both are concepts that must work in concert to deliver a functional application.

want to learn more?

i stream on twitch @malgasm and i tweet at @malgasmtv

come say hi!

Writing Redirects in Kubernetes' Nginx Ingress

mal — Mon, 28 Mar 2022 22:39:52 +0000

Are you using Kubernetes and want to redirect a www website to its non-www counterpart, or vice versa? Hey, me too! 😃

I recently re-launched the website for dictate.life and in the midst of planning the deployment I realized that there were a couple of simple requirements that I hadn’t been fully aware of at first:

I want people to be able to access the site via https://www.dictate.life or https://dictate.life (or even http://dictate.life, for that matter!)
While you’re browsing the website, I want the address bar to always show that you’re on the www. version of the site.

I’m familiar with performing this sort of task using a 301 redirect in a traditional Apache or Nginx environment, but I was unfamiliar with how to do this in a Kubernetes environment. Here’s how I ended up accomplishing it:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  namespace: default
  name: my-nginx-ingress
  annotations:
    ...other annotations...
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/configuration-snippet: |
      if ($host = 'myhost.com') {
        return 301 https://www.myhost.com$request_uri;
      }

The neat thing about this redirect is that it not only redirects requests to the root path, /, but also to any other path. So if someone visits http://dictate.life/about, they’ll be taken to the correct HTTPS-enabled, www-toting version of the url 🎉

This isn’t the only way to use the configuration-snippet option of Kubernetes’ nginx ingress. I’ve found that the above snippet best suits my needs, but let’s say that regardless of the URL input by the user, you always wanted to redirect them to the root. This would be a useful situation if you were moving to a new website where the URLs didn’t match. In that case, you’d simply leave off the $request_uri portion, e.g.

nginx.ingress.kubernetes.io/configuration-snippet: |
  if ($host = 'myhost.com') {
    return 301 https://www.myhost.com;
  }

This is the best way I’ve found to apply configuration changes to one ingress, assuming that you have only one. Nginx ingress also supports altering the default configuration of multiple ingresses at once, using ConfigMaps. More info on that can be found here: https://kubernetes.github.io/ingress-nginx/examples/customization/custom-headers/

Want to learn more? Here's a shameless plug: come watch me code or ask me a question on my Twitch stream! https://www.twitch.tv/malgasm/

original article: https://malgasm.com/blog/32/write-redirects-in-kubernetes-nginx-ingress-how-to