Gulamabbas Mawji
Flexbox CSS Featured Image

Same Height Columns using Flexbox

One of the biggest issues I’ve had with CSS was when I made columns of text with borders. Unless all the text was the same length; so that it panned out to the same height, I would end up with un-even, ugly columns.

Enter Flexbox, the best CSS specification you’ll ever need; aside from CSS Grid (we’ll get into that eventually). With Flexbox all you do is set the Flex Items (the children of the flex parent) CSS property to:

display: flex;

This will pad out the content to ensure the items all have the same height. In the below example you can see this by looking for the flex-container (parent) and flex-item (child) CSS classes.

See the Pen Same Height Columns with Flexbox by Gulamabbas Mawji (@gmawji) on CodePen.dark


HTTPS

DigitalOcean HTTPS on WordPress

Set up HTTPS on WordPress hosted via DigitalOcean

I recently switched over from BlueHost to DigitalOcean, the switch was easy enough and the new site is live. Today I figured out how to successfully redirect all my links to HTTPS to provide a secure connection. The steps are simple to do, but require you to have a non-root sudo user. If you do not have that setup you can do so here.

Anything that is italicised signifies variables you should change to match either your domain, IP, and your user.

Step 1

Log in as your non-root sudo user.

ssh user@your-droplet-ip

Step 2

Install the Let’s Encrypt Client.

sudo add-apt-repository ppa:certbot/certbot

sudo apt-get update

sudo apt-get install python-certbot-apache

Step 3

Set up the SSL Certificate.

sudo certbot –apache -d example.com

If you have multiple domains use this command:

sudo certbot –apache -d example.com -d www.example.com

Follow the steps in the installation, you may get prompted to pick a VirtualHost, select the one that has HTTPS enabled.

You will get asked if you want to redirect all links to HTTPS and if you do this you must be sure all your content works over HTTPS.

Your site should now be available over HTTPS.

Optional Step 4

You can test the auto-renewal process by using the below command:

sudo certbot renew –dry-run

Step 5

Log into your WordPress admin panel.
Navigate to Settings > General.
Make sure the WordPress Address (URL) and the Site Address (URL) both have https:// and not http://. If you change this you will be logged out and will need to log back in.

That will make all your admin pages serve over HTTPS also.


npm logo

Install npm packages without sudo

Stop those pesky npm errors

Just a quick tip really I suppose, I recently re-installed and came across the dreaded npm errors when installing Angular CLI.

Simply set yourself as the owner of the node_modules directory and you no longer get asked for sudo access as npm can write to that folder 😄

sudo chown -R $(whoami) /usr/local/lib/node_modules

Run the above command (you will get asked for your password as you are executing a sudo command) and you can install npm packages with ease now.