DEV Community

loading...
IBM Developer

Spooky Byte-Sized Tech Tips Round-Up: Week 4 (Halloween Edition πŸŽƒ)

Steve Martinelli
Canadian | IBMer | FOSS | Python | Kubernetes
・Updated on ・4 min read

Tip 1: Make your Bootstrap webpage mobile friendly: Trick or Treat! πŸ‘»

From

stevemar image

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

Trick or Treat GIF

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
}
Enter fullscreen mode Exit fullscreen mode

Read more about the project in the GitHub repo.

Tip 2: A scary case for trash-cli 😱

From

moficodes image

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
Enter fullscreen mode Exit fullscreen mode

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

lidderupk image

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

Discussion (1)

Collapse
butnotjulia profile image
Julia Nash

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

Forem Open with the Forem app