Category Archives: tutorials

A Bash Script HTML Boiler Plate Generator

I decided to do the 100DaysOfCode challenge on Twitter. Basically you have to do at least an hour of code each day for 100 days. For me it’s been a few hours a day, but I’m on a serious mission.

For the most part I’ve been focusing on HTML5 and CSS3. I desperately needed to get up to date with both. Today however, I felt like changing it up a bit. I decided to create an HTML template generator using BASH scripting. I thought about using Python, but BASH seemed more suited to the task, and it’s been a while since the last time I used it.

I’ve only messed around with BASH a few other times. The last time, was probably about 15 years ago when I had to rename a couple thousand image files in a directory. I wrote a script to do the work for me. BASH is perfect for taking repetitive tasks and automating them for you.

BASH stands for the Bourne Again Shell. It’s a scripting language native to Linux and Unix systems. I figured it would be the easiest way to create a program to auto-generate the starting skeleton of an HTML document. You know, all the boring stuff in the head like the title, meta tags, links to your fonts and scripts. Now all I have to do is type the command “template” in a terminal window and it creates all that for me. Then just customize the meta-tags, title and anything else that needs to be changed to fit the project. Here’s how I did it.

First I created a directory on my hard drive ~/scripts/bash

In the new directory I created a basic text file with my html template in it and named it html_template.txt I normally write my own skeletons but for the test I found this really cool site that does it for you. http://htmlshell.com

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  <meta name="author" content="name">
  <meta name="description" content="description here">
  <meta name="keywords" content="keywords,here">
  <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=font1|font2|etc" type="text/css">
  <link rel="stylesheet" href="stylesheet.css" type="text/css">
  </head>
  <body>
  
  </body>
</html>

Next I wrote my bash script:

#! /bin/bash
# script to auto-generate html templates.
# create alias and link to this script.
#
# example: alias template=~/scripts/bash/./template_maker.sh
#
# point the html template on line 13 to proper directory.
# In my case ~/scripts/bash/html_temp.txt

echo "What is the name of the html file you want to create?"
read Name

cat ~/scripts/bash/html_temp.txt >> $Name

mv $Name ${Name}.html

echo "Would you like to create another file? Type 1 for yes or 2 for no."
read userInput

if [ $userInput -eq '1' ]; then
clear
./template_maker.sh && exit
else
clear
echo "Thank you, come again!"
fi

Here’s a basic explanation….

I created a script called template_maker.sh

Using “echo” we ask the user the name of the file they want to create.

The user types in the name creating the Name variable.

Using the cat command we copy the text (the html template) from html_temp.txt and append it to the $Name variable.

We then copy the Name variable using the “mv” command and add the .html extension.

The program then asks the user if they need to create another file by entering 1 for yes or 2 for no.

If they enter 1 the program starts another instance of the script before exiting and asks the user the name of the file they want to create starting the process all over again.

If the person types anything other than 1 the program ends and prints “Thank you, come again!” to the screen.

I then turned the script into an alias command by permanently adding it to the last line of my .bashrc file in my root directory.

# my custom bash scripts

alias template=~/scripts/bash/./template_maker.sh

If you decide to try this or use this make sure the command points to the directory you stored the bash script in, and make sure you link the text file in the script to the proper directory as noted in the comments section at the top of the script.

Now whenever I start a new project I just open my terminal program, cd to the new project directory,¬† figure out the page names I’m going to create and get the starter templates or boiler plates loaded. Saves me a good 15 to 20 minutes of time depending on the size of the project I’m working on.

I run the “template” command. Enter the names, index, links, directions, contacts one at a time and the script creates the skeletons of index.html, links.html, directions.html or whatever I want to name the page.

I’d like to improve on this in the future with a more elegant loop, and maybe add an option to create a basic css stylesheet as well. I’m sure I’ll think of a few other improvements too.

So that’s my second attempt at a simple bash script. Hope this made sense and if you read this far, thanks for reading!

Adjusting Brightness And Contrast With Gimp

My first youtube video and I was really nervous. This is just a quick tutorial using mainly the colors menu to adjust the brightness and contrast using Gimp in various ways.

sample image for video tutorial

Image taken along the Niagara river in Niawanda Park Tonawanda NY. Feel free to download and use for the above video tutorial. To download full size image just double click image, then when image opens, right click image and save to your hard drive. Click the back arrow to return to the tutorial.

If you found this image looking for a snowy park scene, feel free to use it, but a link back to the tutorial would be appreciated.

Youtube Gimp Text To Path

Here’s a quick and easy Youtube video that explains using Text To Path with Gimp.

To get curved text with Gimp to either wrap around an image or spruce up a graphic all you need to understand is how to Text To Path. This video explains it in a few easy steps. Once you figure out the basics, just use your imagination and the sky is the limit.

Create a Watermark In Gimp

Today I want to show you how to create a watermark in Gimp to protect your copyrighted work. For the example I’ll use one of the tiles from my first graphic pack that I put up for sale. I needed a watermark to protect the sample graphics that can be seen here.

This is real simple to do and using Gimp we can achieve this in about 4 simple steps. NOTE: I tried to highlight all the buttons and tools that you will have to use. For the final steps I combined the opacity and rotate tool. If your new though, you can just mouse over the buttons to find out what they are. Just click on images to enlarge.

bg-fractal-5-spaceFirst download and load the trippy psychedelic fractal graphic above in Gimp. Once the tile is loaded you want to create a new layer and make sure that transparency is checked. If you like the graphic, click here for information on use.

psyWatermark1Now select a font. I chose Sans Bold, I wanted to use something kind of chunky. And change your color to white and make the font size about 60px. Then click on the tile and type Sample. Note: If Gimp creates a font layer for you, some versions will, just delete the unused transparent layer.

psyWatermark2Now click on the rotate tool. Then click on the Sample text and rotate till its going across the tile  from corner to corner. You may want to use the move tool to center it. Just click on the move tool then click directly on the text and move it into position.

psyWatermark3Finally, click on the opacity and bring it down to about 30 or whatever you think looks good. The goal is to make it not look overly annoying and not completely kill the design.

funky psychedelic trippy background tile.

Finished product will look something like this.

That’s it, you’re done ! Click file, save, export as filename.jpg and your sample watermark is finished. You could also use a transparent svg file in whatever color you wanted as the overlay and then slide the opacity for the svg to get the same effect only in a design instead of text. I may do that in another tutorial down the road.

To see this effect in use click here.