Getting Started with Bash Scripting

“Create your Own Bash Scripts and Free Yourself from Code Drudgery.”

Once you’ve been using the terminal to move around your system for a little while, creating/deleting/moving files and the like, the next step is to start writing your own Bash scripts. And this is where the real joy of using Bash comes into play – being able to automate all the repetitive tasks you do in your daily web development with scripts you can call with a simple one liner in the terminal:

$ super-script.sh save-me-from-drudgery

So in this post I’m going to show you:

1) Where to store Bash scripts.
2) How to create a Bash script and get it up and running.

Then at the end I’ll give you a few simple Bash scripts that I use regularly and that you might also find helpful in your web development work. Let’s go.

Continue reading the full article…

Creating a Hero Image with CSS Grid

“Make Your Header Images Sooo Much Better”

It’s 2021.

I took a deep dive into CSS grid during UK Lockdown (exciting times).

CSS grid has been adopted by all the major browsers.

Let’s use CSS grid to create some hero images that are easy to understood, customize, and are fully responsive to look great on all devices.

I’m inspirational!

Hire me

<div class="hero-image">
  <div class="hero-tint">
    <div class="hero-content">
      <div class="hero-text">I'm inspirational!</div>
      <a class="hero-button" href="#contact-details" target="_blank">Hire me</a>
    </div>
  </div>
</div>

The hero-image is the overall container that will take the css background image. The hero-tint will stretch over the container and create a dark semi-transparent background, making the white text more readable. The hero-content is the container for the text and button. We will use CSS grid to position it on top of the .hero-tint div. A bit of text, a button/link. The standard stuff. Now let’s move onto where the grid magic will happens, the CSS.

Continue reading the full article…