DEV Community: Richie Moluno

Control Structures

Richie Moluno — Tue, 19 Apr 2022 20:38:17 +0000

Control Structures enable developers to control the order of events in a program. They can be considered as the building blocks of computer programs. Control structures are commands that enable a program to “take decisions”, follow one execution path or another, repeat code, or continue linearly.

There are three basic types of control structures namely;

Sequential flow
Selection or Conditionals
Repetition (Loops or iteration)

Sequential flow

For sequential flow, the program is executed in an ordered form, basically in the form in which the code blocks are written in the program.

The first command in the sequence is executed first, the next command will only be executed after executing the previous one.

Example

name = "Richie"
print(name)

age = 99
print(age)

print("Richie is 99 years old")

The code block above is an example of a python code. This would be the order of execution.

Assign the string "Richie" to the variable "name"
Print name
Assign an integer value of 99 to the variable "age"
Print age
Print "Richie is 99 years old"

Output


>>> Richie
>>> 99
>>> Richie is 99 years old

You can see that the print statements were executed according to the order in which they were written, it first printed the name then the age, followed by "Richie is 99 years old"

Selection or Conditional flow

The idea behind conditional flow is that they allow you to control the code execution based on different conditions in the program. There are different types of conditional statements in programming.

if Statements
while Statements

if statements

Here you're essentially telling the computer to check if a certain value is true or false. If the condition is true, the computer needs to perform a certain action. If the condition is false, then the computer would perform a different action or continue in the original sequence of code.

The general syntax for if statements are

if (condition/Boolean expression):
       statement A

Example
Here's an example in python code

In this example, the "2 > 1" was the condition placed, and print("Hello world") is the statement. Since 2 is greater than 1 the Boolean expression returns True. Now, that the condition has been met, python will proceed to execute the code within the if statement.

What do you think will happen if the condition wasn't met?
In this case, python will ignore the statement within the if code block, and, continue to follow the original path of execution.

Here, i changed the condition, so we have 2 > 4 as the condition. 2 isn't greater than 4, this condition returns false. Now, python will ignore the statement within the if code block and continue in the original flow.

Output

>>> My name is Richie

Instead of printing "Hello world", our output would be "My name is Richie"

For the example above, we had only two path of execution, there are cases where we may need more alternatives.


If (Condition):
     [Module A]
Else:
     [Module B]
[End if structure]

Here, if the if condition isn't met, the code within the else block will be executed

To add multiple alternatives, you can use the else if of elif structure.


If (condition A), then:
     [Module A]
Else if (condition B), then:
     [Module B]
        ..
        ..
Else if (condition N), then:
     [Module N]
[End If structure]

Example
This flow adds conditions to the else code block. Here's an example below.

Output

>>> 2 is less than 4

The output was so because, of all the conditions stated, only 2 < 4 returned true, so python will proceed to execute the code within this block.

Repetition (Loops) structure

For loops, the program repeats a sequence of steps as often as long as the conditions placed are valid. It is similar to selection and conditional flow, since they both have a condition. And this condition has to be met before executing the code within the block.
The difference is that, the code within the block will be executed continuously as long as the condition is True.

Here, it requires a statement that initializes the condition controlling the loop, and there must also be a statement inside the module that will change this condition leading to the end of the loop.

There are generally two types of looping techniques namely;

While loops
For loops

While loops

In while loops, a condition is first evaluated. If this condition returns True, only then will the program proceed to execute the statements within the block.
Below, is the general syntax for while loops


while condition:
      statements

A While loop will run as long as the condition returns true. To avoid this there has to be a statement within the block that'll change the condition. This will lead to the end of the loop.

Here's an example where i implemented while loops in python

Condition --> counter < 5
Module --> print hello world
print the value of the counter variable
increase counter by 1

By increasing the counter by 1, it'll get to a point where the counter value will no longer satisfy the condition attached to the loop.

The program will execute in the following manner

1. Program starts.
2. counter is initialized with value 1.
3. Condition is checked. 1 < 5 yields true.
  3.a) "Hello World" gets printed 1st time.
  3.b) Updation is done. Now counter = 2.
4. Condition is checked. 2 < 5 yields true.
  4.a) "Hello World" gets printed 2nd time.
  4.b) Updation is done. Now counter = 3.
5. Condition is checked. 3 < 5 yields true.
  5.a) "Hello World" gets printed 3rd time
  5.b) Updation is done. Now counter = 4.
6. Condition is checked. 4 < 5 yields true.
  6.a) "Hello World" gets printed 4th time
  6.b) Updation is done. Now counter = 5.
7. Condition is checked. 5 < 5 yields false.
8 . Flow goes outside the loop.

Output


Hello world
1
Hello world
2
Hello world
3
Hello world
4

For loops

In for loops, a set of instructions are repeated for every value in a sequence. The sequence may be a list, a dictionary, a tuple or even a string.

The general syntax of a for loop is


for loopingVariable in sequence:
      code block

Here the loop assigns the value of the first element in the sequence to the loopingVariable, then it executes the code. Then it assigns the second variable in the sequence to the loopingVariable, then it executes the code in the code block.
It will do this for every element in the sequence.

Example

In this example, letter is the loopingVariable
"Hello" is the string

What is happening here?

First, the first element in the string "Hello" is 'H'. This first element is assigned to the variable letter. Then the print statement prints the letter and its' position index.
The looping variable is then assigned to the second letter in the sequence, which is e. Then the print statement prints the letter e and its' position.
The looping variable is then assigned to the second letter in the sequence, which is e. Then the print statement prints the letter l and its' position.

This will be repeated for all elements within the sequence till there are no more elements to assign to the looping variable.

Output


H is in position 0
e is in position 1
l is in position 2
l is in position 2
o is in position 4

Conclusion

Control structures change the flow of programs and enable us to construct complex sets of instructions out of simpler building blocks.

As long as you understand the nature of the flow, the different control structures can be combined in any way. Conditionals can contain loops, Loops can also contain conditional. You can go a step further by adding loops within loops within conditionals. It all depends on what you want to achieve.

Variable Declaration and Initialization

Richie Moluno — Mon, 11 Apr 2022 18:47:40 +0000

VARIABLES

In Programming languages, variables allow programs to store, load, and manipulate information which can be referenced later on. They also provide a means to store data with a label, this label is usually a descriptive name to give a developer an idea of the type of data stored.

Variable properties

There are 4 major properties associated with variables;

A name
A type
A value
Scope

The name of a variable should describe the information that is stored within the variable. The name is very important because this is how we access the value stored in a location in memory.

The type refers to the kind of data being stored, in some programming languages the data type must be defined before initializing the variable. This tells the compiler the kind of value to expect. Languages like this are, C++, Java, etc.

In other languages, the data type of each variable doesn't need to be specified before initialization, for this case, the data type is inferred based on the value passed. Example is Python;

All actions carried out within variables can be grouped into three major parts;

Variable Declaration
Initializing the Variable: Access(Read) and Assign(Write)

Variable Declaration

In declaring variables, this is basically where we announce the existence of the variable to the computer, the declarations simply gives an identifier to a value stored in memory
The code below is a variable declaration example in type script

let age: number;

Here the identifier age refers to a number value stored at a certain location in memory, the general syntax for declaring variables her is

let <name> : <type>;

for C++ the syntax for declaring variables is

<type> <name>:
example

int age;

This tells the processor to reserve a location in the computers memory, this location should be enough to store any value of integer type.
After declaring the variable, whenever we refer to the variable name, the program knows the exact location in memory it reserved.

There are specific rules to how we name variables;

Variables can not contain spaces
Variables can only contain letters, numbers and undrescores.
Variables names must begin with a letter

Initializing a Variable

Initializing a variable refers to the process wherein a variable is assigned its' initial value before it is used within the program.
Initializing a variable comes after declaring the variable. A variable can not be used without first declaring it.
In some programming languages, the declaration and initialization process can be done in one line.

In python, if we say age = 50, the age variable is first declared and we don't need to specify the data type, since we passed in an integer, python infers the data type automatically.

Assigning a value

Considering the example below

height = 20
height = height + 60

First the program, reserves a location in memory and assigns the label 'height' to it, it then stores the value 20 in that memory location.

For the second line, python first evaluates what's on the right hand side, then passes that value to the memory location with the label 'height'.
On the right hand side, python is faced with a variable height, it goes to the location in memory with this label and retrieves the value stored within that location.
The value stored here is 20, it then retrieves the stored value and evaluates 20 + 60 to 80, this is the new value.
This value is then stored in a location in memory, then it's labelled 'height'.

So whenever we call the variable height, the program searches for the location in memory with the label height, and returns the value within.

Python: Syntax and Semantics

Richie Moluno — Fri, 25 Mar 2022 01:19:20 +0000

SYNTAX

The syntax of a programming language refers to the order to which different elements are combined to from valid expressions. These elements may be words, operators, or phrases. The syntax of a programming language doesn't have any relationship with the meaning.

An example of a syntax rule for programming is the assignment statement:

print(expression)

This is a valid syntax for using the print statement in python. If we try this without the closed bracket --> print(expression, it'll return a SyntaxError since we didn't follow the correct syntax.

SEMANTICS

Semantics emphasizes the meaning of a program, so it'll be understandable and easy to predict the outcome of execution.Semantics provides significant information needed to understand a program
For example

while <Boolean expression> :
    <statement>

This is the general form of a WHILE statement in python. For the semantics, when the value of the boolean expression is met, the embedded statement would run.

<statement>
while <Boolean expression>:

The code above has no valid meaning because, we placed the statement before the starting the While loop. In this case the syntax is correct, but the semantics is wrong.

Another example is when we try to divide an integer by a string.
For instance

x = 3
y = "Richie"

print(x/y)

The syntax for the code above is correct, but the semantics is wrong, because it doesn't send a valid meaning. An integer can not be divided by a string.

Python3 - Virtual Environments

Richie Moluno — Thu, 10 Mar 2022 03:31:58 +0000

In python, any interpreter you install by default works on the global environment which is not unique to each project. So, any project you start, for the packages needed, when installed or uninstalled they'll have an impact on the global environment.

Why Virtual environment

For example Project_A and Project_B requires a certain package to work, lets call this package PackageB.
At first it doesn't seem like a big deal, but lets say the two projects need a different version of the same package (PackageB), this is where the issue arises.

A good approach to solving this issue is introducing a Virtual environment. It solves this by isolating each project in a seperate environment. In this case, any package installed in the virtual environment are specific to that environment i.e they are only installed in that environment alone when activated.

As we proceed, i'll show you how to setup and activate a virtuanenv for python3

Install virtualenv for Python3

Here are some of the prerequisite for setting up a virtualenv

Python3
pip

1 To install Virtualenv with python3 run python3 -m pip -U install virtualenv.

2 After installing, we need to check the directory where python3 is installed on the system, to do this run where python3

In my case it's C:/Users/HP/AppData/Local/Microsoft/WindowsApps/python3.exe.

Create the Virtualenv

1 After getting the python3 path, the next step is to create the virtual environment. To do this i first create my working folder python-venv then navigate to this folder using cd python-venv.

python3 -m venv /path-to-new-virtual-environment

In the screenshot above, i used a relative path instead of the full path, for more on this refer to my previous article on Relative and absolute paths

2
If you navigate to your new venv folder you will notice a set of new folders (Lib, Include, Scripts), it shows that your venv was created successfully.

3 Now your virtual environment is set. To check for available commands and options for working with virtualenvs run

python -m venv -h this will display more like a reference summary of different command options available

Activate the virtualenv

At the current state if we run pip install any package, it will still install them globally, which is not what we want. In order to install packages to our virtualenv we have to activate it.

To activate the virtualenc, navigate to the root directory of the virtualenv and run .\scripts\activate (note the slash direction).

If your environment is activated you’ll see (python-venv) before your path in your terminal prompt like in the image above. Now all packages installed will be in the new virtualenv.

To deactivate an active virtualenv, run deactivate

Exporting the virtualenv

Let's say you successfully finished a program that required you to install certain packages using pip, and you want your program to be available to others, a problem will arise since they'll need the exact packages and version. To fix this we have to export a list of packages used. To do this run pip freeze > requirements.txt. This command exports a list of the packages to the requirements.txt file which can later be installed by others using pip install -r requirements.txt

CSS Selectors

Richie Moluno — Mon, 07 Mar 2022 11:05:33 +0000

CSS selectors are components of the CSS rule set, they are implemented for selecting the content of your web page you wish to style. CSS selectors choose elements in HTML based on the class, type, attribute, id etc.

Selectors are those names that you give to your different styles.
While creating a style, you define how each selector should work in terms of the size, color etc.

Below are a few basic types of selectors for CSS;

CSS class selector
CSS id selector
CSS Universal selector
CSS element selector.

Class Selectors

The CSS class selector selects the element to style based on it's specific class attribute. It is used with a dot symbol " . " followed by the class name.

.nameOfClass {
    CSS Declarations
              }

This is the general syntax for class selectors in CSS.
Below is an example of how it is applied.

.container {
    width: 360px;
    height: 420px;
    background: rgba(216, 190, 190, 0.6);
    color: #fff;
    position: center;
    top: 150px ;
    border-radius: 15px;
    box-shadow: 0px 11px 35px 2px rgba(0,0,0,0.8);
    margin:auto;
    position: relative;    
}

ID Selectors

The CSS ID selector selects the element to style based on it's specific ID attribute. Each id is unique to a page, so only one element is attached to one ID although it's possible to use the same ID for more than one element, but this isn't done because it's against the normal convention. The ID selector is used with a hash symbol " # " followed by the ID name.

#nameOfID {
    CSS Declarations
              }

This is the general syntax for ID selectors in CSS.
Below is an example an ID selector applied with a login form.

#login-form {
    background-color: #FFFFFF;
    height: 400px;
    width: 400px;
    margin: 7em auto;
    border-radius: 1.5em;
    box-shadow: 0px 11px 35px 2px rgba(0,0,0,0.8)
}

Universal Selectors

The CSS Universal selector is used to select all the elements on the page. It is used with an asterisk symbol " * ".

* {
    css declarations;
}

This is the general syntax for Universal selectors, in this case it'll point to all elements on the page.

div * {
     font-family: sans-serif;
}

Here it selects all the elements within the div tag and sets the font to sans-serif.

Element Selectors

The Element selector selects the HTML elements by name.

element {
    CSS Declarations
}

Relative and Absolute Paths

Richie Moluno — Wed, 16 Feb 2022 10:44:54 +0000

WHAT ARE PATHS

A path is a slash-separated list of directory names followed by either a directory name or a file name. Paths are similar to directories, a directory refers to a folder on a computer which has relationship with other folders within and around it.
A path can be classified into Relative paths and Absolute paths.

RELATIVE PATHS
As the name suggests, it is a path relative to the current working directory. Relative paths make use of some special symbols (. and ..) which refer to the current directory and the parent directory. Since directories are hierarchical these symbols are used in moving up in the hierarchy.
One major drawback of relative paths is, for instances where we want to move a document or file, we'll have to move the referenced data too

ABSOLUTE PATHS
An Absolute Path is a full path specifying the location of a file or directory, The specialty of this pathway is that it begins from the root directory and leads to the locations i.e it is specified from the root directory or the start of the filesystem.

Below is an example to illustrate how relative and absolute paths work.

C:

Desktop

Scripts

NewFolder

name.txt

maindistro

Files

In this case C: is the root directory, considering a case where we're working from the "Scripts" folder and we want to access the name.txt file, the relative path would be ./NewFolder/name.txt, but the absolute path would start from the root directory which is C: so it'll be C:/Scripts/NewFolder/name.txt

Introduction to Charsets

Richie Moluno — Tue, 08 Feb 2022 20:44:45 +0000

CHARSETS
A charset is a set of different cahracters that are being used or supported by a software and hardware, it's the key component behind displaying and editing numbers, text and symbols on a computer. These character sets are created through a process known as encoding.

A computer or software has different purposes or tasks to carry out, the characters needed to perform a specific purpose are then grouped into a character set. When text is inputed through a keyboard or some other means, the character encoding map then maps the characters you chose to the specific byte memory.

Some example of Charsets are

ASCII
UNICODE
UTF-8
UTF-16
UTF-32

ASCII and UNICODE
ASCII is short for American Standard Code for Information Interchange. Unicode and ASCII are the two most used character encoding standards in the Technology sector, they are basically standards on how to represent set of characters in written form, these characters include, symbols, digits, lowercase letters and uppercase letters.

Most of these characters are represented in binary form since it is easier for computers to store numbers than letters, these characters are then written, stored and transmitted in digital media.

Differences between ASCII and UNICODE
One of the major differences between ASCII and UNICODE is the way they encode characters, ASCII only encodes a set of characters which include, letters, numbers and symbols but in the case of UNICODE, it encodes a much larger range of characters.

Originally ASCII used seven bits to encode each character which was inadequate, to sort out this issue Extended ASCII was introduced, it then increased from 7bits to 8bits.
For UNICODE, it uses a variable bit encoding program, here you can choose between 8, 16 and 32 bit encodings.

One other significant difference is the number of characters being accomodated by each of the encoding standards. UNICODE accomodates more characters than ASCII this is why most written languages are supported by UNICODE, Chinese is a good example of these languages. It also supports right-to-left scripts like Arabic.

Unicode is the IT standard for encoding texts for both Computers and telecommunication devices, but ASCII only encodes characters for electronic communication only.

Larger space is occupied by UNICODE because it is a superset of ASCII, and ASCII uses less space.

Git Branches and Collaborative workflow

Richie Moluno — Thu, 03 Feb 2022 22:03:45 +0000

Before going into what Git and Github is, lets go over version control systems and it's appliction to the tech space. VCS is short for Version control system, it is a Version management system that tracks changes in files along with the order in which the changes to these files were made.

Git is an example of a Version control system (VCS), Github is different from Git, but since they are used side by side it is often confused for Git. Github is more like a shared hosting platform for all repositories and applies Git for effective collaboration within organizations and developers. One of the features Github provides is forking. Forking is basically creating a copy of the main repo on your user account so experimental changes can be made without affecting the main product.

Collaborative workflow

With collaboration being one of the major strengths of Git and Github, it also allows for synchronous development within teams of developers or organizations.
Below is a visual representation of Github workflow, references will be made to this diagram as we continue.

Assuming you want to start working on a project

Fork: A fork is basically a remote copy of the original repo. To make a fork of the original repo,

Navigate to the top right corner of the repository and click "Fork".

Select the destination of the Fork, you'll most likely choose your Github profile. In this case we'll refer to the main repository as upstream and the forked repos on you profile as origin.

Clone: The next step would be making a copy of the remote repository and sending it to your local machine. To do this, simply Open your terminal and navigate to the directory of your choice on your working machine then run git clone <url to remote repository. Here we're cloning the forked repo.
Now you're ready to start working and editing file, before doing anything, you'll have to create a new branch and this will be your development branch. To do this, run:
git checkout master
git checkout -b name_of_new_branch
If some changes has been made to the original repository maybe by other devs, you can update your local repo by running the fetch command.
git fetch upstream
git merge upstream/master To merge changes with master branch.
This will make sure you have the latest version of the repo.
If changes were found you'll have to sync your remote forked repo to keep it upto date, run git push origin branchname.
Pull Request: This is done when changes from the local repo are synced with the forked repo and they are ready to be pushed to the main repository. These changes are not fully merged to the main repo, they'll have to go through review by the admin before the merge request will be accepted.

BRANCHES

A branch is used to create a copy of a repository at a particular time, it stores the state of the repo at that point in time and forms an independent line of development, i.e changes made to the repository while in this branch won't affect the state of the main project.

Types of Branches

Branches can be classified based on their use, some examples of these branches are namely:

The master branch
The dev branch
The feature branch
The hotfix branch

These branches have unique applications in collaborating with git.

The Master branch: The master branch is the main working line, like the main state of the project. It has to be with as little errors as possible this is why it isn't used as the main working branch.

The Dev/Develop branch: It is normally used as a kind of staging environment or testing environment where new features will be developed and tested before being merged to the master branch to effect the changes of the new code.

The Features branch: Most work in projects may have several features to be rolled out at different point in time, development of these features usually start from the master branch so it'll carry along the code history of the whole project and start from the most recent release state of the application. After development of each feature, it is then branched out and then merged with the Dev branch, it has no direct access to the master branch. There can only be one master and dev branch, but git allows for multiple features branch.

The Hotfix branch: This branch is used in cases where the application has a bug and needs to be rectified urgently, here a branch is created from the master branch, then work is done to fix the bug before being merged with the Dev branch.

Common branch operations

It's good to understand that branches are just git pointers to commits in time, creating a branch doesn't change the repository

Creating a branch
To create a branch named feature1 use

git branch feature1

This only creates a new branch feature1 any commit made now won't be saved on this branch because we're still on the master branch, to switch to the new branch, we use

git checkout feature1

Now any changes or commits made to the code will be saved in the new branch.

Deleting a branch
Once you've finished working on a branch, you can merge it to the master or dev branch before deleting it, deleting the branch won't affect the repositories history except the changes made in the branch has not been merged.
To delete the feature1 branch, use

git branch -D feature1

Note that the previous command will only delete the copy of the feature1 branch on the local machine, another copy will still be on the remote repository, to delete the feature1 branch from the remote repository, run

git push origin --delete feature1

Pull a remote branch
To pull a branch from the remote repo use git pull against the origin and specify the branch name.

git pull origin <branch name>
git branch to check the list of available branches
git checkout <branch name> to switch the pointer to the new branch

Merging branches
To merge branches we use the git merge command, but before doing that, you have to switch to the branch you want to merge to example master branch.

git checkout master to switch to the master branch
git merge feature1 to merge the feature1 branch to master

This is only valid for a local repository, to merge with a remote branch, we use

git push --set-upstream origin <branch name>