Spooky Byte-Sized Tech Tips Round-Up: Week 4 (Halloween Edition 🎃)

Tip 1: Make your Bootstrap webpage mobile friendly: Trick or Treat! 👻

From

Steve Martinelli

Canadian | IBMer | FOSS | Python | Kubernetes

A spooky little project that was made in an hour for my son. Check it out in GIF form below. It's just some HTML and Javascript. Nothing fancy as I wanted it to be served on GitHub Pages. Click on a button to set the image source and visibility. Bootstrap was used so I could just pull in a decent looking theme easily.

In GIF form

In interactive Glitch form

One thing worth noting is that I learned how to make webpages that use Bootstrap more mobile friendly by adding this line to the header.

<meta name="viewport" content="width=device-width, initial-scale=1">

HTML body

<nav class="navbar navbar-default">
  <div class="container-fluid">
      <div class="navbar-header">
          <a class="navbar-brand" href="https://github.com/stevemar/trick-or-treat">GitHub Repo</a>
      </div>
  </div>
</nav>

<div class="container-fluid">

  <div class="row">
    <div class="jumbotron">
      <h1>Trick or Treat</h1>
      <p>Click on a button for a spooky surprise 🎃 ...</p>
    </div>
  </div>

  <div class="row">
    <div class="container-fluid">
      <img id="image" style="padding: 10px; height: 300px; visibility: hidden"/>
    </div>
  </div>

  <div class="row">
    <div class="container-fluid" id="div_button">
      <button class="btn btn-warning btn-lg" type="button" onclick='change_image("monster")'>Trick!</button>
      <button class="btn btn-primary btn-lg" type="button" onclick='change_image("candy")'>Treat!</button>
    </div>
  </div>
</div>

Javascript

function change_image(file_prefix) {
  number = Math.floor(Math.random() * 6 ) + 1;
  var image_src = "images/" + file_prefix + number + ".png";
  document.getElementById("image").src = image_src;
  document.getElementById("image").style.visibility = "visible";
}

Read more about the project in the GitHub repo.

Tip 2: A scary case for trash-cli 😱

From

Mofizur Rahman

Go Developer, Does Container-y stuff, Collects Stickers (in no particular order)

Imagine it is Friday, 5:00 PM. You are ready to call it a day and head home. You just want delete some of the builds you did so you delete the bin folder.

Please for the love of all things good, do not run this

rm -rf /bin

Oh no! you have deleted the bin folder from your root directory!

If that is something you are scared of, you can make use of this tool. trash-cli is an rm replacement for your linux environment. You can alias trash-cli to rm and never have to worry about accidentally deleting everything off your computer.

Read more about trash-cli.

Tip 3: Use the watch command to monitor your Kubernetes pods

From

Upkar Lidder

Upkar Lidder is a Full Stack Developer and Data Wrangler with a decade of development experience in a variety of roles. Educated in Canada and currently residing in the USA. <3 Python and JS!

One very useful command when starting with kubernetes is kubectl get po. The problem is you have to enter it over and over again when you get want to see the pod status. Fear not, there is a handy --watch flag you can pass in and this keeps the command runnings and gives you any updates. While this is an improvement, you can quickly get overwhelmed with pod change if you have a lot of pods as every change is shown as a new line. Consider this simple deployment creation using a public image:

$ kubectl create deployment hello-server --image=gcr.io/google-samples/hello-app:1.0 -n test
deployment.apps/hello-server created

Let’s check on this single pod using the --watch flag

kubectl get po -n test --watch
NAME                            READY   STATUS    RESTARTS   AGE
hello-server-5bfd595c65-pzpkz   0/1     Pending   0          0s
hello-server-5bfd595c65-pzpkz   0/1     Pending   0          0s
hello-server-5bfd595c65-pzpkz   0/1     ContainerCreating   0          0s
hello-server-5bfd595c65-pzpkz   1/1     Running             0          3s

Four lines just for this single pod! Imagine working with a namespace with a dozen pods. There are ways to ask for a single pod using labelling or adding grep after the command, but mostly people just ask for everything. Specially if you don’t know the details of the pod. To work around this verbosity of the --watch flag, I use the watch program. The watch command runs repeatedly and displays the results in a friendly manner.

Every 2.0s: kubectl get po -n test                 Upkars-MacBook-Pro.local: Fri Oct 30 17:06:44 2020
NAME                            READY   STATUS    RESTARTS   AGE
hello-server-5bfd595c65-pzpkz   1/1     Running   0          5m7s

Let’s delete the deployment using the kubectl delete deploy command. The following shows the progress of the watch screen

Every 2.0s: kubectl get po -n test                 Upkars-MacBook-Pro.local: Fri Oct 30 17:07:56 2020
NAME                            READY   STATUS    RESTARTS   AGE
hello-server-5bfd595c65-pzpkz   1/1     Running   0          6m20s

to

Every 2.0s: kubectl get po -n test                 Upkars-MacBook-Pro.local: Fri Oct 30 17:08:30 2020
NAME                            READY   STATUS        RESTARTS   AGE
hello-server-5bfd595c65-pzpkz   0/1     Terminating   0          6m53s

to

Every 2.0s: kubectl get po -n test                 Upkars-MacBook-Pro.local: Fri Oct 30 17:08:40 2020
No resources found in test namespace.

Pretty cool eh! You can install watch using brew and other package managers.

Comments

[Julia Flash]

Thanks for keeping it spoopy Steve and celebrating Mofi and Upkar too.