DEV Community: Samuel Beard

How to Tame a Roaming Footer

Samuel Beard — Thu, 07 Nov 2019 14:52:06 +0000

Don't you hate it when you don't have enough content on a web page and the footer just hangs there. Directly under said content. Half way up the screen - nowhere near the bottom.

Here is a quick and simple way of making sure the footer sticks to the bottom of the screen when there isn't enough content to push it down there.

<div class="super-container">
    <div class="navbar"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

.super-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex-grow: 1
}

You can put all the css from the .super-container into the body if you don't want the extra div.

So this will make your content section grow to push the footer to the bottom on the screen nicely. And if the content goes past the fold, it will all work as usual.

Useful NPX

Samuel Beard — Wed, 11 Sep 2019 10:39:28 +0000

You probably use, or at least have heard of, npx if you work with Javascript. If not, look it up. It's really handy.

Here are some commands I run on the reg with npx:

npx okimdone npm install

If you have your volume up, a voice will tell you when the command you entered is done. It's really handy for tasks that take ages but want to come back to after.

npx npm-check

# Options
-u - Interactive Updates
-y - Update everything
-s - Skip unused
-g - Global

Checks your installed npm packages and gives you info about them. It's great for seeing if you have stuff in your package.json that your aren't actually using in your app.

Running npx npm-check -su will simply update all of your packages.

npx npkill

Run this from the folder that holds all of your projects. It will list out every node_modules folder from there along with the amount of disc space it is using. You can then go through them and delete the node_modules folders individually by hitting the space bar.

npx generact

If you are creating components for react, this is really useful.

Generact will duplicate a component you already have made and give it a new name. It will copy the old components file structure and change the component name anywhere it is written inside it.

npx samuelbeard

Just thought this was neat.

If you know of any more npx tools that are super useful, bung em in the comments.

Raspberry Pi & Raspbian setup as fast as possible

Samuel Beard — Tue, 26 Mar 2019 11:39:09 +0000

This is a simple setup guide to install Raspbian on a Raspberry Pi and get it set up headlessly. This means that we we won't ever need to plug a keyboard, mouse or screen into it.

This is a tutorial for MacOS and Linux because it makes use of the terminal. If there is demand, I will write a Windows specific version.

Make sure you have these things:

Your Raspberry Pi
A way to power your Raspberry Pi
A micro SD card
A micro SD card adapter so you can plug it into your computer
A computer
If your Pi doesn't have WiFi built in, you'll need a WiFi dongle.

Wifi is built in to the Raspberry Pi Zero W and Raspberry Pi 3 and on.

Download these things:

Etcher - https://www.balena.io/etcher/
Rasbian Stretch Lite - https://www.raspberrypi.org/downloads/raspbian/

Let's carry on with the tutorial assuming you have everything installed and downloaded.

Installing Rasbian

Unzip the Rasbian zip folder that you downloaded. There should be a .img file in there.
Using your USB adapter, plug in your micro SD card to your computer.
Open Etcher on your computer.
Select the .img Rasbian file in the left section.
Select the micro SD card in the middle section.
Click "Flash" and wait.

Once that is done, Rasbian is installed.

By default, Rasbian disallows ssh connections. So we will need to enable them. Also, we want the Pi to be able to connect to our WiFi right away so we don't need to connect a screen and keyboard to it.

Enable SSH over Wifi

If the micro SD card has unmounted from your computer, reconnect it.
In the Terminal, go to the SD card.

# Mac
cd /Volume/MySDCard/
# Linux (Can vary or require additional steps)
cd /media/MySDCard/

Add a blank file simply called ssh to the micro SD card.

$ touch ssh

Add a file called wpa_supplicant.conf to the micro SD card.

nano wpa_supplicant.conf

This file needs to contain your WiFi name and password. Here is a template you can edit.

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev
network={
    ssid="YOUR_NETWORK_NAME"
    psk="YOUR_PASSWORD"
    key_mgmt=WPA-PSK
}

Once these two files are on your SD card, remove it and plug it into your Raspberry Pi.
If the PI needs a Wifi adapter, plug it in. Then power up the Pi.

The only cable you need to have plugged into the Pi is the power cable.

Find Your Pi's IP Address

You can do this by simply looking at your routers UI. Just find the device called 'Raspberry Pi'.

If you want to find the IP in the terminal:

arp -na | grep -i b8:27:eb

This will give you an IP address starting with '192.168.'. That's your Pi's internal IP address. You can only access your Pi from another device on the same network using this address.

All Raspberry Pi device MAC addresses start with 'B8:27:EB'.

Access and Setup

SSH onto your Pi

sh pi@192.168.x.x

Replace the Xs with your Pis IP address.

When asked for a password, type 'raspberry'. It will look like nothing is being typed. Don't worry, it is.
The first thing we want to do here is to change that default password.

passwd

Update

sudo apt-get update

You are all set and ready to go! Just use your new password when SSHing to the Pi from now on.

If you have questions, feel free to ask.

You can also check out the Raspberry Pi Stack Exchange