Spooky Byte-Sized Tech Tips Round-Up: Week 4 (Halloween Edition 🎃)
Published: 2020-10-31 02:27:45

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

> From
> {% user stevemar %}

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](https://getbootstrap.com/) was used so I could just pull in a decent looking theme easily.

*In GIF form*

![Trick or Treat GIF](https://dev-to-uploads.s3.amazonaws.com/i/wp5h04ck8ern3roxn2de.gif)

*In interactive Glitch form*

{% glitch stevemar-trick-or-treat app %}

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.

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

### HTML body

```html
<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

```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](https://stevemar.github.io/trick-or-treat).

## Tip 2: A scary case for `trash-cli` :scream:

> From
> {% user moficodes %}

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*

```bash
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](https://github.com/andreafrancia/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](https://github.com/andreafrancia/trash-cli).

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

> From
> {% user lidderupk %}

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:

```bash
$ 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

```bash
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`](https://formulae.brew.sh/formula/watch) program. The `watch` command runs repeatedly and displays the results in a friendly manner.

```bash
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

```bash
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

```bash
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

```bash
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`](https://formulae.brew.sh/formula/watch) using `brew` and other package managers.