Tip 1: Make your Bootstrap webpage mobile friendly: Trick or Treat! π»
From
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
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
[Deleted User]
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.
Top comments (1)
Thanks for keeping it spoopy Steve and celebrating Mofi and Upkar too.