Latest Course Awards – SoloLearn CSS & HTML Fundamentals.

My latest course awards. I’ve been working on the SoloLearn app and finished the CSS and HTML fundamentals courses. Great courses and a really fun app for the phone. SoloLearn is a community of coders working on everything from Python to CSS and everything in between. The courses are filled with tutorials, code explanations and quizzes. I really enjoyed these a lot. If you’re looking for a fun phone app to practice code and learn, you might want to check it out.

css certification award

My SoloLearn CSS course certificate.

html award certificate

The SoloLearn HTML award certificate.

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!

Working On My Use Of Fonts In Photography and Graphics

I’ve been updating my understanding of modern HTML5 and CSS3. One of my weaknesses has always been graphic design. It was one of the things that stopped me from wanting to start a freelance web design business. Seeing I’m on a self improvement kick, I figured it was time to update some of those design skills as well.

One of the things I’ve wanted to work at for a while now, is how I utilize fonts in graphics and photography. I’ll be sharing a bunch of my work on Twitter and other social media sites. I spent the afternoon playing around with some font work. I’ve got a long way to go but I did like the way this one turned out.

I’m not going to do a full out tutorial on this, although I will be posting tutorials again soon. I did want to share this though, and just briefly explain how I created it.

photo and c;loud quote

Keep your head in the clouds and your feet on the ground.

This was a simple edit I did, taken from a blurry image I took at the boat races. I cropped out a section of the image because I loved the way the clouds looked. Then using Gimp I went to Filters/Map/Make Seamless. That gave me the layered cloud effect and it can also be used as a website background or graphic filler without the text now.

Here’s the image I took the clouds from. Terrible composition and blurry.

blurry image of boat races.

I cut out the clouds from the upper right hand corner. Added some text with an inspirational quote.

The font I used is called CAC Champagne. The text was written out in sky blue lettering. I created a second transparent layer then created an alpha selection with the lettering. I grew the alpha selection by 2 pixels, then used a black flood fill on the transparent layer. I then removed the alpha selection and used a gaussian blur on the blue lettering.

I really like the way the font effect came out. I’m planning on doing a bunch of these inspirational style quotes as a way to improve my font work. I’ll post my progress to the blog regularly. I’m not the greatest at Gimp, but I’m really happy with the progress I’ve made with the program. The important thing is that my clients seem happy with the work.

Here’s another image I posted to my Twitter earlier.

inspirational quote and photo of bird

Your attitude, not your aptitude, will determine your altitude.

One of the most important things I’m learning is how a font can set the tone or feeling of the project you’re working on. Whether it’s photography, graphic work, or web design, the font selected helps set the tone of your content. I experiment with colors, tones and fonts till the project has the right feel to me.

Getting Real Serious About Web Design

As I stated in some earlier posts. When I got into cryptocurrency trading I put everything on hold including this business. For the most part, I’ve lived crypto 24/7. I learned a lot and made a few friends along the way.

When I got back into web design I realized immediately that a lot has changed in the code. HTML5 features a lot of new tags, and I could definitely use a refresher course in CSS3. Over the last couple weeks I’ve signed up for several code boot camps focused around HTML5 and CSS3. Because most of these courses all have the same general content flow I do them all simultaneously. I’m currently signed up for I think 4 different boot camps.  In a lot of ways, learning code is all about repetition. The more you get your feet wet and do it, the more you’ll retain. At least, that’s how it has always worked for me.

I finished the shortest course last night. It was an introduction to HTML on CodeAcademy.

Introduction To HTML – CodeAcademy

CodeAcademy doesn’t give you a certificate so I took a screen shot.

Completed course for introduction to HTML

Introduction to HTML – Course Completed.

my completed skills screenshot.

HTML first to be added to my completed skills.

I was a little apprehensive about taking an Introduction to HTML. I’ve been using this markup language since the mid 90’s. I was really happy I took it though, a lot has changed since then. The course covered a lot of the new features in HTML5 and I realized how dated some of the markup I was using was.,

I think I’m going to get involved in the 100 Days Of Code challenge. It’s a challenge to code at least a half hour a day and learn something new everyday for 100 days.  I’d like to finish that before summer arrives 🙂

Next up… Another refresher course in CSS!

Well if anyone needs a website, now is the time to contact me. I’m working cheap right now, but that’s going to change soon. I brought on a local real estate developer, and I should be finished up with that in the next week or so then I’m free to take on new projects.

A Link To My CodeAcademy Profile.

Blogger Blogs and Google Products.

I just don’t know what’s going on with Google lately. More and more I’m moving away from their products. I find G-mail slow and clunky. Drive is useful but somehow I have issues downloading files on there from time to time. Then there’s Blogger! The first platform I started blogging on in early 2000. It’s always been buggy, and at times difficult. You really can’t understand unless you’ve used the product. Pages don’t format properly, images load funny, and you really don’t have a lot of control over the design.

So, I haven’t blogged on Blogger in a while. I’ve been on a weight loss kick and decided to do a blog about ketogenic dieting. My hosting company said I need to upgrade my service plan if I want to host any more blogs.  I really didn’t want to increase my overhead and figured I’d use Blogger for a bit. On top of that, I wanted to put together a blogging portfolio and thought it would be nice to add a couple blogger blogs to it.

OK, great. Blogger is super simple to set up. I register a domain, point it to Blogger and get started. I love the easy setup with Blogger. You pick a theme, choose your color scheme, upload a profile pic and you’re ready to blog! It doesn’t get much easier than that.

You would think after all these years, pages would format easier but you still get the same weird formatting glitches when captioning images and formatting pages. I can deal with that, I know how to get around them most of the time using the HTML editor.  It’s still a pain though!

So I’m starting to question whether or not I want to host the blog on Blogger. This morning I get an idea for a blog post. I only have my phone with me and decide to download the Blogger app to post it from my phone. I install the app, write my blog post, and I can’t get the image to load or the page out of draft mode. Complete frustration sets in! IMHO the Blogger app for Android is useless.

I guess the moral of this post is if you stop by here looking for advice and suggestions on blogging. My advice is, DON’T USE BLOGGER! Yes, it’s free but it just isn’t a good product!

I’m going to continue blogging there against my better judgment. I’ll have another blog to add to my portfolio, and I can always transfer it to a WordPress site down the road. If anything, it will be a good example of what not to do when starting a blog.  Google used to be such a great company, creating great innovative products. I honestly don’t know what’s going on over there.

If you want to check out my weight loss blog on blogger you can find it here:

https://www.my-keto-blog.com/

Here’s a screenshot. There’s not much there now but I’ll be posting regularly and adding to the design as time allows.

screen shot of a keto diet blog.

A simple diet blog about ketogenic dieting created on Blogger.