DEV Community: Goodness Chris-Ugari

Serving the Content of your Static Websites Faster with AWS CloudFront

Goodness Chris-Ugari — Wed, 18 Aug 2021 20:35:41 +0000

Introduction

A static website is a website that contains web pages with fixed contents. It is made up of HTML, CSS, and JavaScript files and doesn't require any server-side processing. Your website is available worldwide through a static IP. However, if your web server is in one place, and your users are in an entirely different place it might take some seconds until your website appears and loads for your users. Delivering your static content through Amazon CloudFront could optimize delivery times for your users no matter where they are in the world. In this article, we will be going through the setup and host a static website on S3 and accessing the cached website pages using CloudFront content delivery network (CDN) service.

In this guide, we will create a public S3 bucket and upload the website files to your bucket, configure the bucket for website hosting and secure it using IAM policies, speed up content delivery using AWSs content distribution network service, CloudFront, and access your website in a browser using the unique CloudFront endpoint.

Prerequisites
AWS CloudFront
AWS S3 Bucket
Create an S3 Bucket
Upload Files to S3 Bucket
Secure Bucket Via IAM (Identity and Access Management)
Distribute Website via CloudFront
Conclusion

Prerequisites

To follow along with this tutorial, you should have:

An AWS account, you can create one here
A static website or frontend application

AWS CloudFront

CloudFront is a service provided by Amazon.com to enable content delivery on websites. In simple terms, it means your static websites can have super-fast loading rates without spending any dime on expensive CDN services like MaxCDN, Cloudflare, or RapidScale. Your blog could even load much faster than some sites hosted on PHP or any application servers, including those that use Java, NodeJS, and many more. CloudFront offers low latency and high transfer speeds during website rendering. Being able to serve the static content of my websites from multiple edge locations around the world is fantastic. This speeds up site load times for visitors and balances that traffic flow across the Amazon CDN network. With AWS CloudFront, you can securely transfer content such as software, videos, data, and APIs to clients with high transfer speed and low latency. It will cache your content in edge locations and decrease the workload, thus resulting in the high availability of applications (Since the cache is closer to the user, the content will be delivered with minimal latency). It is simple to use and ensures productivity enhancement. It provides high security with the Content Privacy feature. It facilitates GEO targeting service for content delivery to specific end-users. It uses HTTP or HTTPS protocols for the quick delivery of content. It is less expensive, as it only charges for the data transfer.

AWS S3 Bucket

Amazon S3 (Simple Storage Service) is a simple storage service designed to store data. With this service, you only pay for what you use, it has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web. Buckets serve as containers for objects and provide the mechanisms necessary to control access to them, you can think of them as folders. Using an S3 bucket to store your website files has its advantages. With S3, there is no risk of over-provisioning as with traditional servers, it is easy to use, it scales automatically, integration options such as fast content serving with CloudFront, and high availability (Amazon guarantees 99.99% availability of S3 which means there is almost no chance of losing your data. S3 achieves this by replication across multiple data centers).

Create an S3 Bucket

Navigate to the AWS Management Console page, type S3 in the Find Services box, and then select S3.

In the S3 dashboard, click Create bucket.

In the General configuration section, enter a Bucket name and a region of your choice. Note: Bucket names must be globally unique.

In the Bucket settings, in Block Public Access section, uncheck the Block all public access. It will disable the Block all public access feature to the bucket objects via the S3 object URL.

Note - We are allowing the public access to the bucket contents because we are going to host a static website in this bucket. Hosting requires the content should be publicly readable. You will see a warning notice that turning off block all public access might result in this bucket and the objects within becoming public, tick the checkbox in that section to acknowledge that that is what you want to do.

Leave the rest of the settings as they are and click on the "Create Bucket" button.
After the bucket has been created, click on the bucket name to open the bucket to the content area. Since you just created the bucket, there are no contents in it yet.

Upload Files to S3 Bucket

In the bucket content area, click on the "Upload" button.

Click the "Add files" and Add folder buttons, and upload your website file contents from your local computer to the S3 bucket.

Note - Use the "Add files" button to add files, not in a folder, and use the "Add folder" button to add folders(for example a folder containing the project images). Do not upload the entire project at once by uploading the top project folder, that won't work. Open your project folder on your local computer and upload folders as folders and files as files. The above is the structure of my project files and I want to make sure that after uploading them to the S3 bucket that they appear just as they do on my local computer.

-After selecting the files, you still need to click another "Upload" button at the bottom of the page.

After the files have been uploaded, you will be notified if it was successful, you can then click on "Close" to go back to that particular S3 bucket dashboard where you will see the folder(s) and files you uploaded. Confirm that they are in the right order and that your index.html file is in the root folder.

Secure Bucket Via IAM (Identity and Access Management)

From the dashboard of the bucket you created, click on the Permissions tab. Confirm that the bucket allows public access for hosting.

Still in the permissions area, scroll down to the Bucket policy section. You should see that it is empty, click on the "Edit" button.

-Enter the following bucket policy and replace "" with the name of your bucket and click "Save changes" at the bottom of the page.

{
"Version":"2012-10-17",
"Statement":[
 {
   "Sid":"AddPerm",
   "Effect":"Allow",
   "Principal": "*",
   "Action":["s3:GetObject"],
   "Resource":["arn:aws:s3:::<bucket_name>/*"]
 }
]
}

-After the policy has been changed, you will be redirected back to the permissions area.

Note - If we had made the bucket private, we wouldn't have to specify any bucket access policy explicitly. In such a case, once we set up the CloudFront distribution, it will automatically update the current bucket access policy to access the bucket content. The CloudFront service will make this happen by using the Origin Access Identity user.

Go to the Properties tab and then scroll down to the Static website hosting section.

Click on the Edit button to see the Edit static website hosting screen. Now, enable the Static website hosting , and provide the default home page and error page for your website. For my project, the index page or homepage is in the index.html file so I input that in the "index document field", I also inputted index.html in the "error document" field for testing purposes but you can either leave it blank as it is optional or put the document there also. After inputting those, click on "Save changes"

Did you notice that enabling static website hosting requires you to make your bucket public? In the snapshot above, it says "For your customers to access the content at the website endpoint, you must make all your content publicly readable."

After successfully saving the settings, scroll down to the Static website hosting section again in the Properties area and you should now be able to view the website endpoint as shown below:

Distribute Website Via CloudFront

From the search field at the top of your AWS console, search for "CloudFront" and select "CloudFront" in the search results.

From the CloudFront dashboard, click Create Distribution.

On the new page, for Select a delivery method for your content, click Get Started.

Fill the Create Distribution settings form, under Origin Settings , in the "Origin Domain Name", select the S3 bucket you created earlier. In the "Origin Path" field, enter "/" to indicate the root level. For the "Restrict Bucket Access", select "Yes", for "Origin Access Identity" select "Create a New Identity" (Allow access to the S3 content using CloudFront URL ), for "Grant Read Permission on Bucket", select "Yes, Update Bucket Policy".
In the Default Cache Behavior Settings , in the "Viewer Protocol Policy", select "Redirect HTTP to HTTPS".
In the "Distribution Settings", for the "Default Root Object" input "index.html" (This file residing at the root level, will be the default landing page).
Leave the defaults for the rest of the options and fields and you should have something as seen below:

Note - the Grant Read Permission on Bucket says that Yes, update access bucket policy automatically to allows the Origin Access Identity user access to the bucket content. Origin Access Identity user represents the CloudFront service.

After confirming your values, click on the "Create Distribution". It may take up to 10 minutes for the CloudFront Distribution to get created.
Go back to your distributions page. Once the status of your distribution changes from In Progress to Deployed, copy the endpoint URL for your CloudFront distribution found in the Domain Name column and append ".cloudfront.net" to it in your browser.

You can also access the website via website-endpoint, such as "http://.s3-website.us-east-2.amazonaws.com" and using the S3 object URL such as "https://.s3.us-east-2.amazonaws.com/index.html". All three links: CloudFront domain name, S3 object URL, and website-endpoint will show you the same index.html content.

If we were not "hosting" the website on S3, we could have made the bucket private and host the content only through the CloudFront domain name. In such a case, the S3 object URL and website-endpoint couldn't access the private content.

Checking that it works: Accessing my static page using the CloudFront domain name. Yay! 🎉🎉🎉

Conclusion

You can see how easy it is to host a static website using services and also serve the contents of static websites faster using AWS CloudFront. Hope you found this guide useful and that you learnt something new.

Resources

https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html

https://aws.amazon.com/cloudfront/ https://adamtheautomator.com/aws-s3-static-ssl-website/

Understanding CSS Position Property

Goodness Chris-Ugari — Tue, 20 Jul 2021 18:03:03 +0000

CSS positioning can be a bit confusing for beginners but once they get the hang of it, they will realize that it offers them so much flexibility with the placement of their elements. In this article, I will try to explain the CSS position property and its values as clearly as I can to help you get a better grasp of them and how they affect your elements.

Introduction
Static Positioning
Relative Positioning
Absolute Positioning
Fixed Positioning
Sticky Positioning
Conclusion

Introduction

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

There are three (3) rules that determine how things get rendered on the screen or just based on your HTML code by default:

Block elements take up 100% of the page width while their height is determined by the content, so your content is the first thing that determines how large your elements get displayed.
The default layout or order of elements on the screen is determined by your HTML code.
Children sit on parents. For example, if you have an h1 in a div, you can say the h1 is on top of the div.

You can use the CSS position property to position elements on the screen the way you want them to instead of going along with the default layout and in most cases, you are going to want to make changes. CSS position is usually used with the co-ordinate properties (top, left, right, bottom). The position property can take five (5) values and we will go through each of them in this article.

Note - The co-ordinate properties only work on elements that have any of the position properties except the static position declared on them.

Static Positioning

All HTML elements are static by default and static means go along with the rules and keep to the default HTML flow. From the pen below, you can see that adding the position property with a value of static to the divs doesn't change the default positions of the elements.

Relative Positioning

Relative positioning allows you to position the selected element relative to how it would have been positioned by default or if it was given a position of static. Say you give an element a position of relative and then left of 50px, you are saying the element should move or be pushed 50px away from where it would have been positioned, it is like adding a margin of 50px between the left of the element and where it was initially positioned or say you give the element property of right 100px, it is the margin between the previous right edge of where the edge of the element used to be and its current right edge of 200px relative to where it should be. When you move an element that has a relative position, it doesn't affect the position of anything else on the screen, it is as if the old position was kept or still being maintained and everything else just flows around it as if it was never moved. All the other elements keep their positions, they will not be adjusted to fit into any gap left by the element. as is illustrated in the pen below. When you give an element a position of relative, it does nothing until you add at least one of the left, right, top or bottom properties to the element. Setting the top, right, bottom, and left properties of a relatively positioned element will cause it to be adjusted away from its normal position.

Absolute Positioning

Say we have an image in a div and the div has a position of relative, if we give the image an absolute position and a right property of 50px, it's not going to shift left by 50px, it's going to shift to the right of the screen and this is because, with absolute positioning, we are positioning the element relative to its parent. The right property of 50px will give the element a right margin of 50px from the right of its parent which is a div in this case. An element with position absolute is positioned relative to the nearest positioned ancestor, however, if an absolute positioned element has no positioned ancestors, it is positioned relative to the body. A positioned element is one whose position is anything except static. You can use absolute positioning to place an element exactly where you want in its parent. Unlike relative, using absolute positioning affects the flow of your HTML, it is like the element is removed from the HTML flow.

Fixed Positioning

If you give an element a fixed position and a left, right, top or bottom property, if you scroll, the element will not move but stay fixed to the position relative to the body of the website or page. Fixed positioning is useful if you have a navigation bar or sidebar that you want to stay fixed. An element with position fixed is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. A fixed element does not leave a gap in the page where it would normally have been located.

Sticky Positioning

An element with a position sticky is positioned based on the user's scroll position. A sticky element toggles between relative and fixed, depending on the scroll position of the browser window. Note that you have to give the element at least one of the left, right, top or bottom properties for it to behave as expected else the element will take on the behavior of a relatively positioned element.

The sticky property is a combination of relative and fixed which keeps an element relative until a position condition is met. Say you give a div a position of sticky and a top property of 50px, the element will be positioned relatively until you scroll to a point in the viewport where the element is 50px from the top, then it becomes fixed.

Conclusion

I hope this article has helped you understand positioning in CSS better. Keep winning!

References

MDN Web Docs

Connect with me on Twitter | Github

10 Platforms to Help Level Up Your Frontend Development Skills

Goodness Chris-Ugari — Wed, 02 Jun 2021 07:34:27 +0000

Introduction

You will agree with me that getting out of tutorial hell can be difficult especially when you are learning on your own. Trying to apply the knowledge gained will increase the rate at which you learn and retain the knowledge. In this article, I will talk about a few resources or platforms that can help you start practicing and improving your frontend skills by working on projects. These resources will help reinforce what you've been learning from tutorials and help you level up as a frontend developer.

1. Frontend mentor

One great thing about this platform is that it provides you with the design and resources you need to build out a project saving you the stress of having to come up with designs and resources on your own so you can just focus on just implementing the design. Another great thing about this platform is that the challenges are organized or grouped by difficulty level so you can start from the newbie challenges and go up to the guru challenges. So this platform is not just for beginners as you can keep coming back here to practice and reinforce your learning as you learn new things. You get to use HTML, CSS, JavaScript, frameworks(such as React, Vue, etc), interact with APIs, and much more. New challenges get added frequently so you can also find something to work on this platform, share your solution and get feedback from others.

Note - There are premium and free challenges but the free challenges are still really good so you don't have to purchase the premium service to get the most of this platform.

2. Frontend Practice

This is a really good platform where instead of taking up these fictional projects and try to build them up like frontend mentors where you are building projects from scratch. With this, you get a list of websites that look really nice and you are encouraged to clone them. The focus is not on the entire project but some of the pages of the sites are focused on and the features on these pages are also highlighted and you are also encouraged to work on these to improve your skills. Cloning sites is a great way to learn because you learn a lot by trying to do something that someone else has already done. Another advantage of working with an actual site is that you can experience all the little interactions and there's no guessing and you try to make sure that your implementation matches it as much as possible. You can take all the skills you have been acquiring over time and put them to use and this way you will learn a lot and reinforce these skills.

3. CSS Battle

This doesn't involve building actual projects but is mainly focused on helping you improve your CSS skills by working on challenges. You will be building unrealistic things or doing things that are out of the ordinary. You would be surprised how doing these things could help you fix or do something in a real-world situation. On this platform, you will have to replicate a given target in the least code possible. The lesser the amount of code used the higher your score.

4. Style Stage

On this platform, a base HTML file is provided for you to restyle and submit a different stylesheet for it.
With the guidelines requiring you to follow accessibility rules, you will not just be creating a project that looks good but one that is accessible also. You submit this via a pull request and you will be told if changes need to be made to your submission and you keep doing this until your submission passes the requirements and then your project can go live. This platform is mainly for developing your CSS skill as you would just be working on the CSS files.

5. Codewars

Unlike CSS battles, this platform provides challenges in a variety of languages. This platform is not mainly focused on visual challenges but coding challenges. You can take advantage of this platform to build up and sharpen your skills to actually building a project. A good platform that can help you to practice your problem-solving skills. CodeWars is a good platform to practice your JavaScript skills as a front-end developer.

6. Dev challenges

This platform is similar to frontend mentors as you get different challenges grouped by their level of difficulty and the challenges are further grouped into three paths, Responsive web developer, front-end developer, and full-stack developer paths. So as a frontend developer, you can focus on the first two paths and build out the projects in those categories. They have eight(8) projects in each category. You get to use Github for the submission and you can give feedback on other people's submissions also.

7. Codewell

Improve your HTML and CSS skills by implementing real design templates on this platform. On this platform, you don't get access to the Figma file with a free account but you get access to the project assets so you can still take advantage of this platform with a free account.

8. Frontloops

This is a paid platform, so to get access to the challenges. The challenges on this platform are categorized into two, Markup which is to improve your HTML and CSS skills, and Elements which is to improve your JavaScript skill. With this platform, you get 30 challenges with their assets for practicing, 30 code solutions(1st solution free), technical hints, and advice. You have to pay a one-time fee of about $19 to get lifetime access to the challenges and their resources for any of the categories you want.

9. Daily UI

This platform is mainly for UI(User Interface) and UX(User Experience) designers but frontend developers can take advantage of this resource by signing up to receive daily emails of different designs for 100 days but instead of creating the design using a design tool like a designer would, a frontend developer can implement the design using code.

10. Ace Front End

This platform offers you access to a few practical coding challenges. It is a great platform for preparing for frontend interviews as it contains a detailed walk-through of an interview solution. You can still use this platform even though you are not preparing for an interview.

Conclusion

A proven way to get better at coding is by doing and these resources can help you do just that. Do not try to use them all at the same time, you can just start with one or two that best suit you, the level you are in your coding journey, and what you are trying to accomplish and try to be consistent at it by sharing your work or learning in public.

Beginners Guide to Shell Scripting

Goodness Chris-Ugari — Mon, 01 Mar 2021 23:27:41 +0000

Introduction

This tutorial will introduce you to scripting in a Bash shell, its structure, and how you can get started with it. In this tutorial, I assume that you are already familiar with or have some knowledge of the shell and Linux commands. If you don't, I found a really nice article on Linux commands by ToyinO, you can check it out.

What is a Shell Script
Structure of a Shell Script
Using Variables
Basic Operators
Shell functions
Conditional Statements for Shell Scripts
Conclusion

What is a Shell Script

A shell script is a command-line program that contains a series of commands that are executed by an interpreter. It is usually a plain text file that can contain a series of commands that will be run or executed by the Unix/Linux shell one after the other or sequentially. A shell script is great for automating tasks, it can help save time and increase productivity. If you have to repeatedly run a series of commands often, whether simple or complex to accomplish a task, then you can and probably should write a shell script for that task. You can put any command that you can type and run on the command line in a shell script and vice versa. Before you can run a script, you need to have execute permission for that script. You can name your script whatever you like but it is advisable that it be descriptive. You can add an extension on .sh to the name of the script but this is just so that it is clear to everyone that it is a script file, with Linux being an extensionless system, the script will still run without the .sh extension. Shell scripts can be used to automate tasks such as daily backups, installation of packages on multiple servers, troubleshooting, and so on.

Structure of a Shell Script

The first line of a shell script should indicate the interpreter that will be used to execute the script, in this case, I am using Bash. This line starts with something called Shebang , which is a # sign followed by an exclamation mark (!). The Shebang is then followed by the path to the interpreter.

Note - there are no spaces in the Shebang line.

#!/bin/bash

After the Shebang line, you can have comments describing what the script does, the name of the author, and even the day it was created. Anything following a # sign is a comment and is not being executed by the interpreter with exception of the Shebang line. Comments are optional but it is a good practice to include comments in your scripts.

# Name of Script: test.sh
# A simple bash script to illustrate some basic concepts
# Author: Goodness Chris-Ugari
# Date: 16-02-2021

After the comments at the file header with details of the script, you can then have your series of commands to be executed.

#!/bin/bash
# Name of Script: test.sh
# A simple bash script to illustrate some basic concepts
# Author: Goodness Chris-Ugari
# Date: 16-02-2021

# Display Hello, World
echo Hello, world

# Display the present/current working directory
pwd

To run the script above, you type out the path to the file and press enter. In this case, it would be ./test.sh, assuming that the script is located in our present working directory. When run the above script will print out "Hello, World" to the command line and print out your present working directory on a new line.

Demonstrating the running of a script

Using Variables

Variables are named storage locations. They are are used when you need to store a particular that you can use later. You can declare a variable and assign a value to it in Bash script. The format for declaring a variable is VARIABLE_NAME=value without spaces on both sides of the declaration. A variable name can be made up of uppercase letters, lowercase letters or a combination of both but remember that Bash is case sensitive. After declaring a variable, you refer to it using the dollar sign ($) followed by the variable name.

# Declare a variable NAME and assign a value to it.
MOOD=Excited!

# Display "I am Excited!"
echo I am $MOOD

I am sure you can guess what the above code would print, I am excited!, that's right! Note that you should use double quotes around complex variable values, like those that contain spaces as Bash uses space to separate items. For example MOOD=very excited! would return an error when the variable $MOOD is used but if we do this MOOD="very excited" would work as it should.

Command Substitution

You can assign the output of a command (What would have been printed on the screen) to a variable, this is known as command substitution. To do this, place it within brackets preceded by the $ sign.

#The code below will return the number of entries in a directory.
dirContents=$(ls | wc -l)
echo The number of entries in this directory is $dirContents

Special Variables

Special or positional variables are variables that are automatically set for you in Bash. Here are some of them:

$0 - This contains the name of the script.
$n - These contain command-line arguments with which a script was called. For example, $1 contains the first argument, $2, the second argument, and so on.
$# - This contains the number of command-line arguments given to the script
$* - All the command line arguments.
$? - The exit status of the last executed command or most recently run script. An exit status of 0 means success while 1 means failure.
$$ - The process ID of the current script

Basic Operators

In bash, you have access to arithmetic, relational, boolean, string and file test operators.

Arithmetic Operators

You can use arithmetic operators in bash scripts by using in a few ways, using the let or the expr keyword, using the square brackets or double bracket preceded by the $ sign. You can't just try to perform arithmetic operations by typing out the numbers with an arithmetic operator. Try typing 1 + 2 or 1+2 in the command line and you will see that it returns an error. If you try to echo them like so echo 1 + 2 or echo 1+2, they get treated as strings and will be displayed as 1 + 2 and 1+2 respectively. Study the code snippet below to understand how they are being used.

#!/bin/bash

#
let myVariable=2+3 #If you are declaring the expression without quotes, then you must ensure that the expression doesn't contain spaces.
echo $myVariable #This will output 5

#Using the let command
let "myVariable = 2 + 3" #You can have spaces within quotes.
echo $myVariable # This will output 5

let myVariable++ #Will increment the last value of $myVariable, so $myVariable will now be 6

#Using the expr command
expr 2 + 3 #You must include space when using the expr command and do not enclose the expression in quotes. This line will output the addition of the two numbers.

expr "2 + 3" #Will be treated as a string and will output 2 + 3
expr 2+3 #Will be treated as a string and will output 2+3

#Using brackets
echo $[2+3] #Will work with or without spaces and output the addition of the numbers.
echo $((2+3)) #Will also work with or without spaces.

Note - with the let command, you have to save the result to a variable while the expr command outputs the result.

Relational Operators

Note - these do not work for string values

Boolean

Note - You can also use || to represent Logical OR and && to represent Logical AND.

String Operators

File Test Operators

Some Common test operators

Shell loops

Loops are used to execute a set of commands repeatedly.

For Loop

This type of loop repeats a set of commands for every item in a list.

for var in <list>
do
    <command>
done

Example

#!/bin/bash

#This will print numbers 1 to 5
for value in {1..5}
do
   echo $value
done

While Loop

This loop executes a set of commands while a given condition is true, so the loop will stop when the condition becomes false.

Syntax

while [<condition>]
do
    <command>
done

Example

#Will print numbers 1 to 5
count=1
while [$count -le 5]
do
echo $count
((count++)) #Will increment count by 1 after every loop
done

Until Loop

This loop will execute a set of commands until a given condition becomes true.

until [<condition>]
do
    <command>
done

Example

#Will print numbers 1 to 5
count=1
until [$count -gt 5] #Loop will stop one count is greater than 5
do
echo $count
((count++)) #Will increment count by 1 after every loop
done

Shell functions

A function is a reusable block of a set of commands. Functions help you to not repeat yourself as you can write a function to perform a specific task and then use it many times whenever and wherever you need it.

Function Syntax

#Without the function keyword
function_name () {
       <commands>
}

#With the function keyword
function function_name {
       <commands>
}

Example

#!bin/bash
#A function that prints out the first argument supplied to it
 function printArg () {
          echo The first argument is $1
}
#Function call with an argument
printArg "Hello World"

#The output of the function above will be "The first argument is Hello World"

Both methods of declaring functions are valid and will behave the same so whichever you decide to use is based on your preference. If you are familiar with other programming languages that also have brackets in their function declaration, you would think the brackets are for arguments but in bash, it is not so. The brackets are merely for decoration and nothing should be placed in them. From the code above, you can see that arguments are provided directly after the function name when you call the function.

Note - you can't call a function before you have declared it.

Conditional Statements for Shell Scripts

Conditional statements allow you to make decisions based on a condition or test within your shell script.

If Statements

This will perform a given set of instructions or commands if the test or condition provided is true, the set of instructions won't be carried out otherwise.

Syntax

if [<condition/test>]
then
      <command>
fi

If Else Statements

This works just like the basic if statements explained above but also provides room for a condition to be performed if the condition is not true. If the condition is not true, the command or set of commands () between else and fi will be executed.

Syntax

if [<condition/test>]
then
      <command1>
else
      <command2>
fi

Example

#!bin/bash
#This script will take 2 numbers as command-line arguments. It will print to the screen the larger of the two numbers.

if [$1 -gt $2]

then
   echo $1
else
   echo $2
fi

Output

If Elif Else

This is used for multiple conditions with different outcomes.

Syntax

if [<condition1>]
then
      <command1>
elif [<condition2>]
then
      <command2>
elif [<condition3>]
then
      <command3>
else
      <command>
fi

Example A script that will print a message based upon which day of the week it is.

#!/bin/bash
#script to print a message based upon which day of the week it is.

day_of_the_week=$(date +%u)

if [$day_of_the_week -eq 1]
then
   echo Today is Monday, aargh!
elif [$day_of_the_week -eq 2]
then
   echo Today is Tuesday
elif [$day_of_the_week -eq 3]
then
   echo Today is Wednesday
elif [$day_of_the_week -eq 4]
then
   echo Today is Thursday
elif [$day_of_the_week -eq 5]
then
   echo Today is Friday, TGIF!
elif [$day_of_the_week -eq 6]
then
   echo Today is Saturday
elif [$day_of_the_week -eq 7]
then
   echo Today is Sunday
else
   echo Something is wrong
fi

Output

Note - you can change your system time to see the different outputs else it will only display the output for your present day.

You can have as many elif branches as you want. It is valid to have an if statement inside another one, that is nesting if statements. Note - You have to include spaces in the square bracket that contains the condition as seen in the examples else an error will be return.

Case Statements

This should be used in cases that might lead to a long string of if and elif statements, case statements present it in a much neater way.

Syntax

Case <variable> in
    <pattern1>)
          <command>
          ;;
    <pattern2>)
          <command2>
          ;;
esac

Example

#!/bin/bash

echo Which color do you prefer? Blue, Green or Yellow? #This will be printed first when you run the script.
read color #Prompt to accept input

case $color in #Compare using the value entered for color at the prompt ********
    Blue)
        echo Feeling blue today?
        ;;
    Green)
        echo The land is green!
        ;;
    Yellow)
        echo It is going to be a sunny day!
        ;;
     *)
        echo Try Again
        ;;
esac #Indicates the end of the case statement

Output

Conclusion

Bash/Shell Scripting is vast and this article is just to help understand the basics to get started. With your knowledge of Linux commands, you can do really useful things with bash scripting and automate repetitive tasks.

Thank you for reading, I hope you find this guide useful 🙂.

Resources

Understanding Var, Let and Const in JavaScript

Goodness Chris-Ugari — Fri, 28 Feb 2020 13:53:23 +0000

There is more than one way to declare a variable in JavaScript, it uses the var, let and const keywords for variable declarations and they all behave differently. I will try to explain them and their different behaviors but before I do that, I would like to explain some concepts that you will come across in trying to understand the various variable declarations, these are Scope and Hoisting.

Scope - The scope of a variable or function is the part of the code where the variable is visible or accessible. So it simply means variable access, that is, what variables do I have access to where the code is running. When a variable is not declared within a function, it is said to have a global scope, is assigned to the global object and can be accessed or referenced from anywhere. A variable declared within a function is said to have a local scope and can only be accessed inside the function.

Hoisting - This suggests that before code execution all variable or function declarations are moved to the top of the code. Technically, they are put into memory but stay exactly where you typed them in your code. Hoisting allows you to use functions before you declare them, so you can doing something like this would be valid:

someFunction()
function someFunction(){
//do something
}

So now we can move on to the different methods of declaring variables in JavaScript

Var - var is traditionally function scoped, variable declared with var outside any function has a global scope and is visible everywhere. A variable declared with var inside a function is assigned to that function, it is local and is visible only inside the function just like a function argument or parameter.
If a variable is declared in a function with the same name as a global variable, it takes precedence over the global variable, shadowing it.
Var is function scoped not block-scoped so if you don't create a new function, you don't get a new scope, a block (identified by a pair of curly braces ({})) does not define a new scope, so things like if statements don't actually create a new scope.
In JS all variables defined with the var keyword have an initial value of "undefined", this is due to hoisting which puts them in the memory with an initial value of undefined.
Var is a less than ideal way to create a variable as you can redeclare a variable that has already been created and not get an error.

Let - This is a new way of declaring variables in JavaScript. It is the block-scoped version of Var. Block means anything surrounded by curly braces {}. So with let, things like if statements and for loops create new scopes. Defining a variable outside a function using let unlike var doesn't create a global variable. A variable declared using let can be reassigned just like with var but it can't be redeclared, trying to redeclare a variable created using let will return an error. like var, variables declared using let are also hoisted but uninitialized variables don't have an initial value of "undefined". With let, when you reference uninitialized variable, you get a ReferenceError.

Const - This keyword is used to declare constants i.e. variables that are not going to change. Variables created using const can't be changed or reassigned to a different value. It doesn't provide immutability, it just makes sure that the reference can't be changed; that is to say, that with constant you can change the properties of the constant if it an object, you just can't reassign the variable. Const is block-scoped like let. If you have anything that isn't going to change, it should be a constant as it is a lot safer declaring it like that so that nobody assigns something else to the variable name.
Const variables are also hoisted but not assigned as with let.

Summary
Var is function scoped and an uninitialized var variable is assigned the value of undefined. Let and const were introduced in ES6, they are both block-scoped and can't be redeclared, trying to access an uninitialized const or let variable will return a ReferenceError. Variables declared with let can be reassigned but with const, they can't be.

DEV Community: Goodness Chris-Ugari

Serving the Content of your Static Websites Faster with AWS CloudFront

Introduction

Table of Contents

Prerequisites

AWS CloudFront

AWS S3 Bucket

Create an S3 Bucket

Upload Files to S3 Bucket

Secure Bucket Via IAM (Identity and Access Management)

Distribute Website Via CloudFront

Conclusion

Resources

Understanding CSS Position Property

Table of Contents

Introduction

Static Positioning

Relative Positioning

Absolute Positioning

Fixed Positioning

Sticky Positioning

Conclusion

References

10 Platforms to Help Level Up Your Frontend Development Skills

Introduction

1. Frontend mentor

2. Frontend Practice

3. CSS Battle

4. Style Stage

5. Codewars

6. Dev challenges

7. Codewell

8. Frontloops

9. Daily UI

10. Ace Front End

Conclusion

Beginners Guide to Shell Scripting

Introduction

Table of Contents

What is a Shell Script

Structure of a Shell Script

Using Variables

Command Substitution

Special Variables

Basic Operators

Arithmetic Operators

Relational Operators

Boolean

String Operators

File Test Operators

Shell loops

For Loop

While Loop

Syntax

Until Loop

Shell functions

Function Syntax

Conditional Statements for Shell Scripts

If Statements

Syntax

If Else Statements

Syntax

If Elif Else

Syntax

Case Statements

Syntax

Conclusion

Resources

Understanding Var, Let and Const in JavaScript