DEV Community: SumiSastri

What is the difference between Bash shells and the Bash Script?

SumiSastri — Wed, 27 Nov 2024 00:16:50 +0000

Bash, is a shell and refers to the specific Bourne again shell. The Bash script is a scripting language that allows you to write a script to automate processes using the Bash shell.

Scripts are interpreted language. What that means is that each line of the code is interpreted, executed and then the interpretation moves to the next line.

Code compilers do not scan through the whole script as a block, instead they look at the code line-by-line.

There are as many scripting languages as they are shells. There are different scripts for Korn, C and Zee shells. For example, the Bash Script takes the file extension .sh whereas the .ksh files are for Korn shells and .csh for c-shells. The syntax for these scripting languages also differ. The environments and how to set up these environments also differ - in part 8 and part 9 - you see that setting up the environments for Bash and Zish differ substantially.

Shell scripts help system operators to manipulate files in the file system (FS) and set user read, write and execute levels to files and folders.

What is the difference between scripting languages and programming languages?

Scripts share, with programming languages, data types and programming logic. However, they are not programming languages as they are dynamic and loosely typed.

This means the languages are interpreted and not compiled. An interpreter reads code line by line and executes each line until an error is encountered. A compiler bundles a whole code block, reading it once and reducing it down to machine code.

Examples of scripting languages are JavaScript, Python, PHP. JavaScript, started as a scripting language to add simple scripts to user events - clicks, mouse and keyboard inputs. However with the rapid advancement of the popularity of JavaScript, it has turned into a compiled language rather than a scripting language with its own set of specialised compilers and interpreters.

One of the downsides of scripting languages is that error messages are not very detailed as scripts are lightweight applications. The error might point to the line that the interpreter has stopped working but the actual error could be a few lines above the actual error message.

The characteristics of programming languages that are incorporated in the Bash script

Bash shares these programming conventions with its own syntax and useage:-

Primitive data types

Strings - the default type
Integers - Bash does not support decimal places or floating point numbers

Nullish types

Ideally not recommended as any empty type may be considered a string - spaces represent ASCII char 32 and is an empty string. Another reason is that there are no user inputs like clicks, scrolling that are recognised by bash as it is a direct relationship between the keyboard and the computer kernel. Zero is not considered a nullish type but an integer.

Variable storage

immutable named variables and the let key word with an assignment operator = for mutable variables.
value of one variable can be assigned to another variable with a different name eg:

num_1 = 10 
num_2 = num_1

Basic arithmetic operators

Addition + , subtraction -, multiplication * , division \ and modulus %

Logical operators

Both statements evaluate to true &&, the or | operator where 1 or more evaluate as true
The greater than and less than are gt and lt not carats are used for numerical evaluations

Control flow conditional statements

There are data control flows with if-then, if-then-else-then as well as if-then-elif-then-else-then blocks as well as nested conditions.
The key loop structures are for-do,until-do and while-do as well as the switch statement for complex looping.

Lists

Bash. like other programming languages, has ordered lists or arrays that allow you to access data and loop through the data performing logical and arithmetical operations.

Where data is stored

In the terminal, data moves from the inputs of the user into 3 streams - a standard input, standard output and standard error.

The $#!/bin/bash is the file entry point and instructions are picked up by the hardware's interpreter, sent into the standard input stream, where it is stored with the instructions in memory. The data is processed and returned in the standard output stream or standard error stream.

Positional variables

Another feature of bash is the ability to initialise variables directly on the terminal. These variables are called positional or script variables.

Pros and cons of Bash

Bash isn't the right choice for complex arithmetic operations or computing challenges as it has only 2 primitive types of data - strings and numbers. Numbers, are not decimal floating points but inttegers.

Shell programming works due to several packages of free software from GNU, allowing piping and diverting of code via sempahores to run parallelly. Natively however, bash is programmed to run serially. GNU offers a collection of programs, applications, developer tools and even games that are embedded in the Bash script.

It is a low-level script that is good for system operators to manage read-write-execute operations on files in the filing system for internal groups and individuals as well as external groups or individuals wishing to access server-based data.

It is powerful and quick, interacting with the key processes in a computer. It is not easy to learn and formatting is manual.

Editors like nano and vim are basic and code is clunky - not an ideal developer experience.

EXTERNAL REFERENCES - What is the difference between Bash shells and the Bash Script?

Photo credit Photo by Tsuyoshi Kozu on Unsplash

[1] Bash Cookbook: Ron Brash, Ganesh Naik, Packt Publishing, July 2018
[2] Stallings W & Mohan R, Computer organization and architecture: designing for performance , 1st edn (Packt Publishing, July 2018), 9th ed., International ed., (Pearson Education, March 2013) chap.1, pg 35
[3] Scott Simpson, Learning Bash Scripting, (Linked-in Learning, Sept, 2022), Accessed: Oct. 29, 2024
[4] GNU(Accessed: Oct. 27, 2024) [Available]https://www.gnu.org/
[5] George Charalambous (2024), BASH part 1, PDF slides Available to MSc Computer Science Students MODULE: (2024) 7SENG012W.1

Computers and computing in the mid-20th century

SumiSastri — Wed, 27 Nov 2024 00:00:25 +0000

The world's first electronic digital computer was the ENIAC - the Electronic Numerical Integrator and Computer. It was designed and constructed at the University of Pennsylvania.

The machine weighed 30 tonnes and occupied over 100 square meters of floor space - the size of a small warehouse.

Stallings, et al [1] note that it was developed as a decimal rather than binary machines to create a ballistic report in the form of tables. The firing tables were to be used by gunners in World War II in the 1940s. It provided the range and trajectory of weapons. By the time it was completed, the War had ended. It was therefore used to perform a series of complex calculation to determine the feasibility of the hydrogen bomb. It was dismantled in the 1950s.

From Lovelace to the ENIAC

Shustek,[2] observes, that while Ada Lovelace and Charles Babbage created calculators, and the Pascaline, built in the 1600s by Blaise Pascale, the ENIAC was a fully electronic computer that had done "more calculations than all human beings in all of history" at the time.

Lovelace and Babbage, conceived of ordered instructions to carryout arithmetic operations. The orders were punched into operation cards with a separate sequence of variable cards to store the use of the arguments of each operation. However, Haigh notes [3], the Analytical Engine was never built or stably designed.

Therefore, while it was a precursor to the ENIAC, the Analytical Engine is not considered to be the first modern-day computer.

The ENIAC, as an assembly of units wired together to solve mathematical problems is the first electronic version of a computing engine. Data control in the ENIAC is distributed and the machine could run processes in parallel. However, these processes were difficult and time-consuming. The execution of instructions was from read-only-memory or ROM. A simple mathematical calculation could take a minimum of nearly an hour to compute and complete execution.

Several scientists, Alan Turing, John Mauchly, Presper Eckert and John von Neumann were researching how a program could be stored in memory. They were also developing methods to retrieve these instructions from memory. This concept of stored programs in memory was incorporated in the design of the Princeton Institute of Advanced Studies model the Electronic Discrete Variable Computer (EDVAC), or the IAS computer.

The fundamental architecture of the IAS computer persists in modern computer design. Computers today are more compact than the historical computers which used vacuum tubes to operate the on-off switches in the computer circuit board, but the basic architectural decisions have not changed significantly, Stallings et al observe.

The ENIAC memory consisted of 20 accumulators, each capable of holding a 10-digit decimal number. According to Stallings et al., it was manually programmed by setting switches and plugging and unplugging cables. Shushtek adds that it was an 840-instruction program that used subroutines, nested loops, and indirect addressing for data locations and jump destinations. A jump destination is a set of instructions or programs that can be used to jump from one part of the instruction set to another, altering the instruction set's normal flow.

The EDVAC and separation of compute, control and memory operations

The EDVAC, separated the planning and set up stages, the compute operation and the storage of the instructions in memory. This meant data flow and control were programmed by circuits responsible for triggering operations at the correct time, Haigh observes. Programming now referred to programming instructions before operations started and coding to the tasks of looking up numerical codes corresponding to the programming instructions.

von Neumann[4], in his First draft of a report on the EDVAC discusses the need for the separation of concerns into the central arithmetic part, a central control part, various forms of memory required, the input and output drivers in the second section of the paper which details the main subdivisions of a computer system.

In his analysis of the central control unit, he says the unit's function is to receive orders from the input driver and provide "a list of orders or code to be used to define the mathematical and logical meaning and the operational significance of its code words". The orders could be to transport instructions from one part of the system memory to another part of the memory to get the next set of instructions from memory, transport instructions from the input driver to the central arithmetic part to execute specific mathematical operations, transport results from the central arithmetic part to the output driver. Speed and reliability are required from the central control unit - the modern-day central processing unit (CPU), or processor.

He emphasises that the main function of memory is to store information in a register which is required while a problem is being solved. Therefore, memory should only be used for the duration that the problem is being solved and cleared with a delay to ensure stability and reliability during the processing of information from memory. In this light, he looks at the capacity unit of memory, speed and delays in accessing data from a capacity unit of memory and the time required to process each capacity unit of memory. Memory is fastest when it is closest to the action it is performing. Latency is inversely proportionate to size. The larger the memory storage unit, the slower the processing power. So, the smallest unit of memory - a bit is closest to the processing units.

The central arithmetic part, as a subdivision of the system is devoted to executing system instructions relating to arithmetical calculations. The logic of the instructions relate to the conversion of decimal system mathematical problems to binary. The section discusses the types of mathematic operations in detail and the set of instructions they may need. It estimates the number of high-speed vacuum tubes the EDVAC needs and the estimated time to complete actions. The paper also explores the vacuum tube elements - the gates and triggers required to execute operations.

The relationship between the ALU, or the arithmetic logical unit that performs bitwise operations on binary numbers, must also access the memory required to store instructions and logic. The method to load the instructions before execution and to relay them back to output drivers is also detailed in this section. The arithmetic part may be impacted by memory delays and other blocks and interrupts in the signals and therefore the section reviews the system requirements for the interdependency of the ALU and memory. Therefore, based on latency, all decimal and fraction operations need to be reduced down to binary so that it can be stored in its smallest memory register located the closest to the ALU.

Stallings et al, note that with very few exceptions, modern-day computers are built on the foundations of the von Neumann model. While von Neumann is credited as the founding father of this architecture, his draft paper is a collective intelligence report from several scientists and mathematicians who remain unattributed in the paper and were working on solutions to the limitations of the ENIAC, according to Shustek.

Life before personal computers

Transisterisation of the EDVAC was the next step in the progression of the early 20th century computers, Stalling et al note. Transistors replaced the vacuum tubes significantly reducing the heat generated and the footprint of the computer in terms of space occupied and energy consumption.

Circuit boards with transistors represent the second generation of computers in the 1950s and 1960s. Transistors are semiconductors that amplify electronic signals and electrical power. Their importance in modern electronics in shrinking the size of computers cannot be overstated, says Moraes [5]. Transistors required less power and had a longer lifespan than vacuum tubes making them ideal for a wide use of electronic devices, Moraes adds. With the introduction of silicon in the manufacture of transistors, heat reduction in the compute process increased helping in the development of integrated circuits and microprocessors, which are the third generation of computers.

In a single chip, today billions of transistors are embedded to amplify electronic signals, the mid-20th century computers started with a few thousand transistors. Transistors increase the voltage and current of the signal, converting even a small input to a significantly larger output. Acting as a valve, the transistor creates a magnified copy of the input signal.

The second big change in this generation of computers was the introduction of a multiplexor to transmit a larger data set of information units over a smaller bandwidth of processing queues to the CPU. When a multiplexor is used in an electronic circuit which involves high-speed switching and data transfers, input has to be selected from many available options based on the signal provided to them, Raj [6] explains. The control signal channels information to input pins and output pins. Control and selection pins are used to select the input and output pin signals.

This combination of applications of these components transformed the ability of these expensive and large machines to be scaled down to size and up in speed and adoption of new users.

EXTERNAL REFERENCES - Computers and computing

Photo credit Photo by Jigar Panchal on Unsplash

[1] Stallings W & Mohan R, Computer organization and architecture: designing for performance , 9th ed., International ed., Pearson Education, March 2013, Available from: ProQuest Ebook Central
[2] L.J. Shustek, "Programming the ENIAC: an example of why computer history is hard", Leonard J Shustek, https://computerhistory.org/ (Accessed: Nov. 25, 2024). Available
[3] T. Haigh, "Where code comes from", Tomas Haigh, https://cacm.acm.org/ (Accessed: Nov. 25, 2024). Available
[4] J. von Neumann, "First draft of a report on the EDVAC" https://web.mit.edu, John von Neuman, edited by Michael D. Godfrey, IEE Annals of the History of Computing , Vol. 15 No.4, 1993, Pg 27 (Accessed: Nov. 25, 2024). Available
[5] C. F. Moraes, "Understanding Transistors: What They Are and How They Work:A deep dive into the world of transistors and their application in modern electronics" https://www.wevolver.com/ Cassiano Ferro Moraes, (Accessed: Nov. 25, 2024) Available
[6] A. Raj "What is a multiplexer circuit and how it works", Aswinth Raj https://circuitdigest.com/ (Accessed: Nov. 25, 2024) Available

What are Github Actions and how to set them up

SumiSastri — Thu, 15 Feb 2024 12:50:39 +0000

I hadn't dabbled much with GitHub Actions (GHA), until I set up a project using GHA for a project I was working on about 8 months ago.

GHA workflows are a means to automate code builds in the dev, testing and deployment pipelines and is one of several continuous integration and continuous delivery (CI/CD) tools.

GHA allows developers to run workflows based on events.
An event is a specific activity in a code repository that triggers a workflow run.

For example, activity can originate from GitHub when someone creates a pull request (PR), opens an issue, or pushes a commit to a repository.

You can run a workflow to automatically add the appropriate labels whenever someone creates a new issue in your repository.

A workflow contains one or more jobs which can run in sequentially or in parallel.

Each job will run inside its own virtual machine runner, or inside a container. The job has one or more steps that either run a script that you define or run in an action.

Setting up GHA configuration or config files

GHA requires a yml.config file to configure local actions to a cloud-based platform. These config files need to be in the root directory and placed in a folder which is a .github folder to be parsed (read).

In the subfolder of workflows you can determine as many config files as you require.

For example, .github/workflows/config1.yml outlines the first set of rules to configure. To add multiple configs for different jobs, all you need to do is to append another file in the same folder for these additional config rules - .github/workflows/config2.yml - and add the required configs.

You can also add a template for how the PR should look in a markdown or .md file, in a pr_template.md file as well as a similar template to report issues.

The difference between issues and PRs

An issue is a discussion topic that does not change the code base.

A pull request triggers the peer-review process, where other developers review the PR making suggestions to change and sanitise the code base making it cleaner, more efficient and maintainable.

The `config.yml` file

GHA requires a config.yml to connect local configurations to the GHA cloud.

What is YAML?

Yml, or YAML (an acronym for Y Aint Markup Language), is a human-friendly data serialisation language that is language agnostic. It’s a strict superset of JavaScript Object Notation or JSON, with completely different syntax.

YAML is lighter and more flexible than JSON and is considered great for config files. JSON is more inflexible and therefore is considered better for data interchanges.

Fields in the `config.yml` file

The config.yml file has the following fields

-name - Name for this config - eg: PR Checks

on - Where the GitHub action takes place as in the example in the code below.

on:
  pull_request:
    branches:
    - name of branch

jobs - Lists jobs to be run during the process (work flow), in this example, the PR checks

A job is a set of steps in a workflow that is executed on the same runner.

Each step is either a shell script that will be executed, or an action that will be run.

Steps are executed in order and are dependent on each other.

Since each step is executed on the same runner, you can share data from one step to another.

For example, you can have a step that builds your application followed by a step that tests the application that was built. In the example below are a jobs config

jobs:
test:
name:  job name (eg: Check formatting with Prettier)
runs-on: system (eg: ubuntu-ltest)

<!-- steps: (list of steps, uses, with and run commands) -->

steps: - name: Checkout
uses: actions/checkout@v3 - uses: actions/setup-node@v2
with:
node-version: "16" - name: name of commands that will run (eg: Ensure Prettier Formatting Passes)

<!-- run: these are the commands that will run the code checks -->

run: |
npm ci
npm run prettier-check

How to protect your main or master branch with GHA

You can configure a GHA workflow to be triggered when an event occurs in your repository, such as a PR being opened or an issue being created.

Workflows in Github refer to the process of software development and maintaining control over versions over several iterations and changes to the code base.

A workflow configures an automated process that will run one or more jobs.

To maintain this control over version control in Github, you can take actions to protect your key branches. The main branch - formerly known as the master branch, is usually is the production ready-branch.

Additionally each branch you create can be sanitised with GHA, leading to cleaner and more efficient merges of branches into the main branch from development, integration or test environments.

These steps allow for continuous integration, of the app into the production branch and continuous delivery. CI-CD, as it is referred to, keeps the main branch ready for release on a continuous basis as well as continuous deployment. New features/ bug-fixes can be released into production and making these features available to customers as soon as they are tested and production-ready reducing time-to-market.

Workflows are defined by a .yml file and will run automatically, or they can be triggered manually, or at a defined schedule.

The most important branch to protect is the main branch.

No direct changes can be made to main (best practice)
Branches must be made from main (the first branch therefore production ready)
Only named people can merge a branch into main (improve security)
This can be done by clicking the protect-this-branch on your repository in GitHub and checking the boxes that you would like depending on what rules you want to set to protect the branch

How to protect sub-branches with GHA

Each branch or sub-branch (from an integration or development branch head) also needs to be protected so that code is sanitised before it reaches the main branch and merged into master.

Some best practices:

Commit history - clean messages and description of reason for change
PR required before branch can be merged - to discuss and make changes
Tests written must pass in the PR environment
A minimum number of people required to review code before merging
Named people review code
Security and best practice - the person who writes the code, changes the code and merges the code into master
Stale branches - changes already made on master pulled into branch and updated before merging
Conflicts - all merge conflicts to be cleared before merging
A PR format
An issues format

I hope this will help you set up GHA in a project without feeling too intimidated to experiment!

Photo Credit: Photo by Campaign Creators on Unsplash

What is the difference between monoliths, microservices, monorepos and multirepos?

SumiSastri — Fri, 02 Feb 2024 13:01:51 +0000

What is the difference between monoliths and microservices?

A monolith is a single program that runs the whole application. The program is responsible for maintaining authentication and authorisation (auth), access to Application Programming Interfaces (APIs), UI (User Interface) and even messaging systems like emails, notifications and alarms. All of these services are tightly coupled.

A microservice has distributed services for different components of the application. This modularises the application and your auth services could be run by one program, while UI run by another. If you have several APIs, each API could have a separate program to run the API calls. This separation of concerns could make the app more performant.

Microservices require dedicated teams, infrastructure management by infrastructure engineers.

Serverless is microservices without infrastructure management and the use of functional programming to set-up and provision servers and infrastructure.

What is the difference between monorepos and multirepos?

A monorepo is one (mono) repository, or repo, that hosts all services needed for the app. It acts as a single source of truth and allows code sharing and code transparency.

The repo may contain several projects with different teams working on each submodule in the repo. While these projects maybe different, the relationship between these projects need not be. Indeed, well-defined relationships between these projects could make the use of monorepo make resounding sense.

A monorepo often has one single package manager - like lerna or pnpm - that updates all the packages in each repo with a single command in the root repository.

There are other tools - Bazel from google, Gradle, Nx by Nrwl and Turborepo by Vercel.

I personally have used both lerna and pnpm and have found them effective in managing related code bases with my side projects as well as at work on an enterprise level. Here is a link to my dev blogs home page

A multirepo (or a polyrepo) code bases distributed across different code repositories.

Is a monorepo a monolith?

A monolith is an app with related data to this app. While a monorepo may contain a monolith, a monolith is not always in a monorepo.

A monolith can be broken up into microservices, but a monorepo can only be broken down into individual repositories.

However, it would be a mistake to apply the use of the monorepo concept simply to colocate code. It goes back to the problem above, which is no well-defined relationship between projects in a repo.

Another way to understand a monorepo versus a monolith is to define each by what it is not.

The opposite of a monorepo is a multirepo (or a polyrepo) and the opposite of a monolith is distributed microservices.

Monoliths have tightly coupled code bases which can only be decoupled by distributed microservices not by polyrepos or monorepos.

A monorepo is often mistakenly thought to be a monolith - this is when code is colocated with no clear establishment of the relationship or use of such a stratgey.

And a monolith is often broken down into polyrepos each with their own code base to decouple code. This decoupling of code is best when related code bases are still colocated without being tightly coupled.

Monorepos can solve some of the challenges faced by a polyrepo approach - inconsistent tooling, duplication of code, a lack of ease in code sharing.

The section on what monorepo tools should provide is useful if you are planning to set up an enterprise-level monorepo.

A monorepo has constraints just as does a monolith, it is not a silver bullet.

Version control systems like Git, and code repo hubs like GitHub, do not scale multiple repos in a monorepo particularly well.

It is also hard for DevOps to move work along from local hosts to integration and production environments. Some of this is attitude to change rather than a true release constraint. Colocated code with clear relationships between the code bases do not mean co-dependency of the code. Each repo can have its own DevOps workflow.

A combination of monorepos and microservices could solve the challenges of monorepos as monorepos are expensive in terms of data storage. Microservices for the distribution of these data sets across microservices may be one available solution.

A monolith may have different package managers, different stacks and different sets of data configured in different ways all related to a single application.

Colocating these packages in a monorepo may make sense in some use cases.

In general, there are no solutions without trade offs. These articles may be useful in determining how and when your use case fits a monorepo, polyrepo or monolith structure.

Further Reading

Photo by Trevor Bobyk on Unsplash

Git, Git 'heads' and branch management

SumiSastri — Thu, 25 Jan 2024 11:41:47 +0000

When Linus Torvalds created Git, he considered it nothing but a "stupid content tracker" and named it Git which in British slang means an annoying and infuriating person.

Git, to its reputation has some infuriating and annoying terminology, and performs certain content tracking tasks in its own way.

It does benefit you greatly to understand the structure around which Git is built and how it tracks version changes.

The section in docs on branch management is a the best resource if you get stuck.

This article is part of a section of blogs on GitHub and repo management on my dev blogsite.

Photo credit: Photo by Praveen Thirumurugan on Unsplash

Git heads and the Merkle tree

A basic concept to get right is, that all commits in a Git branch are part of a Merkle tree.

At the top or the head of the Merkle tree is the trunk or main branch (this branch was formerly called the master branch). The head of the main or original branch and is also known as the origin head.

From the main branch - or the trunk of the Merkle tree - other branches are created. Each branch that is created now has its own head of the branch or branch head.

Sub-branches created from these secondary branches then have their own branch heads.

So the main branch could be the production branch, a sub-branch a development, staging, integration or testing branch.

You may find it useful to read this section in conjunction with the developer workfows section as tracking changes is part of a systematic tracking of every miniscule change through the development process.

Each sub-branch points to a branch head, the branch head may point to another branch head until all branches point to the origin head in the main branch.

To track these complex secondary and tertiary branch changes, the Merkle tree generates serialised hash-tags that uniquely identify all the changes or git commits in a branch.

Wikipedia has a good image and description that really helps understanding the concept.

To change the history of a git commit means understanding how each commit fits into this tree-like structure.

Adding, commiting, staging and pushing code changes up the Merkle tree

Typically the workflow in a branch follow these steps

Making changes- these changes will not be tracked if the changes are not saved
Saving files - files are saved in the local repo once you are confident that the changes work
Changes saved and staged - this is done with a git add command
You can check if your files have been staged with the git status command
Staged files committed - when you are ready to push your changed code into the version control tracking system you do this with a git commit and this command takes a -m flag where you write a commit note - why has the change been made and how does it enhance the feature
You can check the logs of commits at this stage
When you are ready to add the files in your local environment to the cloud repo your committed files can be pushed up to the branch with a git push command this ensures tracked and saved changes are transfered to the repository

If you followed the steps to setting up a repository you have already gone through the process of adding, commiting, staging and pushing code changes to the main branch by adding the README.md file.

The command git add README.md - adds changes you have made to the branch. You then commit these changes with the command git commit -m "your commit message" this sends the code to a staging environment.

At this stage if you check git status you will see your file in the staging area.

You can now check the log files with git log in your main branch you should see commit 123ab456 (HEAD -> main, origin/main, origin/HEAD). The number you see in the commit is a Secure Hash Algorithm or SHA, or hashtag, that contains all the data of the commit and points to the top of the Merkle tree or the head of the branch. This is how a commit points to the head of the git branch. The commit with the hash number holds the data of the author, date and the commit message which describes what the change in the version is all about.

The final command is git push -u origin main which pushes your code up the branch into the head of the branch - as this is the main branch this is the origin head.

So when you git add <filename> you add your blobs in your working file into a staging area. When you git commit -m"Commit message" you save the blob in a log queue.

Run a git log and you should see the blob of data:

commit 123ab456
Author: YourName <your email>
Date: Fri Jan 13 15:11:26 2023 +0000

The number you see in the commit is a Secure Hash Algorithm or SHA, or hashtag, that contains all the data of the commit and points to the top of the Merkle tree or the head of the branch.

The main or master branch is a branch like any other made up of commits. In the case of a main branch, the sub-branches are merged into the main branch.

You can run git log - oneline to see your commit messages in a single line with the commit message and the serialised number that uniquely identifies it. The oneline flag removes the author, date and other information that is contained in the git log command so that you can see the key information as you build up commits in a branch.

eg:

b4ceaa6 (HEAD -> master, origin/master, origin/HEAD) Add regex
eec4771 Render url conditionally on submit for home page
0beb61d Fix radio buttons css and custom component
c1790e4 Debug radio buttons
3d2fee9 Add radio buttons - initial set up

If you run git branch in a repo, you will see a list of branches with an asterisk against the name of the branch you are working on.

Eg:

Feature-Create-data-table
BugFix-Remove-logo
Chore-Update-docs
HotFix-Add-codes-to-db
* Spike-Experiment-with-libraries
Feature-Create-admin-user-form

You can also use git branch -vv gives you your branch version and the name of its origin head and the SHA related to the branch.

Eg:

version-control 4ae7a1d [origin/version-control: ahead 1] Fix nav typos

Each of these branches will be merged into the main branch and each of these branches will have their own origin head.

To check your logs try these out
git log --pretty=format:"%cn - %cd %h %s %t" - a neater version of the log files

Check the Merkle tree git log --pretty=format:'%h %s' --graph git log --graph --oneline --decorate --all

Check more details of the commit git cat-file -p HEAD

Creating your first branch and sub-branch

To create a branch off from the main branch, you use the command git checkout -b <branch-name> this creates a new branch. This defines your new branch, you can also use the more up to date git switch -b to create a branch.

You follow the same steps to add, commit and push code to your branch. Now the branch that you have created has its own branch head and all the logs will relate to the changes made in this branch.

Your initial commit will prompt you to set your upstream when you push changes git push - set-upstream origin <branch-name>, so you run the command and append your branch name to this git push --set-upstream my-new-branch you only need to do this one to link your branch to your branch head. This branch head will then point to the main branch.

NAMING CONVENTION FOR BRANCHES

Naming conventions vary from organisation, to organisation but often use these variables to create branch names to manage branch merges into a complex system of interactive and distributed code.

Type of code change
feature/
release/
hotfix/
bugfix/
test/
chore/
task/
enhancement/
Ticket number
Repository or workflow name - eg: Forms, ECommerce, etc.,
Reason for the creation of the branch

eg: Forms-feature-123-add-radio-buttons

In a personal repo or side project, you can create any name of choice for your branches.

What is an SHA and how Git uses it to track code changes

A Sha is a hash function which takes an input and produces a 160-bit (20-byte) hash value known as a message digest – typically rendered as a hexadecimal number, 40 digits long. It was designed by the United States National Security Agency, and is a U.S. Federal Information Processing Standard.

SHA-1 sometimes know as SHA-0 is deprecated/ SHA-2 and SHA-3 are now required for SSL certificates for browsers by the NIST (National Institute of Standards and Technology).

Version control systems like Git still use SHA-1 to hash versions.

As you have seen above in the log, the SHA is the commit number - commit 123ab456. The commits in this branch track the branch origin head and when you merge the branch into master all the changes in the branch track the master branch with its own unique SHA representing the point at which the branch origin head starts tracking the master origin head.

Merging branches and SHAs

When you merge master into a branch, all the SHA's merged into master are merged into the branch and track the branch origin head.

To integrate these changes to the main branch you need to merge these changes. To merge changes you will checkout of your branch to the branch you want to merge code changes. The steps in this example would be

git checkout main
git merge my-new-branch
git push origin main

You will see all the updated code and the deltas (differences between the last commit and the new commit) running as the information is hashed.

Once the algorithm is run you can push and merge code.

To go back into your working branch you simply checkout of the main branch and check in to your branch with the command git checkout my-new-branch

What does a blob refer to in a git branch and how does it relate to origin head?

If the concept of git as a tree of data can be used as an analogy, then the commits are like leaves on the branch. Each leaf is a data object or a blob.

A blob is an acronym for both basic large object or a binary large object (BLOB) but is spelt as a common noun - blob and referred to as such. While many consider a commit as a file that is being committed, we are merely committing blobs of data to the data tree in the branches of the data tree.

As we have seen, at the top of every branch is the head. To attach the blob data to the branch the first commit must attach itself to the head and is set to the origin head. Each origin head is unique and at the top of the branch that the blob is attached to.

Code snapshots an organic way to capture code as it is changed

As you can see Torvalds is actually right, it is quite an easy to understand content tracking system if you know how the Merkle tree is structured.

Git tracks code up and down the Merkle tree by capturing snapshots of the code as it is changed.

The commands git add <filename> adds a file as a snapshot
The command git add . adds all the files changed to the snapshot
The command git status shows you the files modified but not saved
The command git commit adds the files to save to the snapshot
A commit can be a one line commit or a long commit if the change is complex. With the commit you get a serialised number identifying the commit/ the author of the commit and the date and time of the commit.
All commits are merged into the branch it points to until merges work they way up to the origin-head of the main branch

In summary

The head of the whole project you are tracking in a repo is set once in the main branch.
Each data blob or commit tracks the head that the branch is tracking via a SHA algorithm that collates all the data and tracks the deltas with a hashed number.
The main branch is exactly like any branch.
All new branches created are merged into the master branch.
Each new branch has its own unique head to track changes in the sub-branch.

Clean Code - Part 3 how linting works

SumiSastri — Thu, 18 Jan 2024 15:37:58 +0000

Linting removes fluff from fabrics. That is the original use of the term when threads come off the surface of cloth and you remove them with a linter. This was done for 2 reasons - lint inhaled by workers in a factory resulted in respiratory challenges and artificially inflated the weight of the cloth. Lint had to be removed to clean and pare down the cotton to its real intrinsinc value in terms of commercial sales as well as prevent workers from being impacted by the fluff flying around.

Code linting was created by a computer scientist at Bell Labs, in the United States, for pretty much similar reasons. Stephen C Johnson, used the term linting code as a linter could trap the bad code and leave it out of the code base while letting the best value code pass through.

He split code into algorithms that caught the bad code, then the good code that was written then passed through. More of the history of linting can be found on Wikipedia.

Do read the references where there is a fascinating bio of Johnson, who was not a computer scientist but a mathematician.

It makes reading his original paper a pleasure - some extracts from the 12-page document below.

From Johnson's original white paper on linting

In his original paper, on why he created a linting package, Johnson says "Lint is a command which examines C source programs, detecting a number of bugs and obscurities. It enforces the type rules of C more strictly than the C compilers. It may also be used to enforce a number of portability restrictions involved in moving programs between different machines and/or operating systems. Another option detects a number of wasteful, or error prone, constructions which nevertheless are, strictly speaking, legal. Lint accepts multiple input files and library specifications, and checks them for consistency."

The paper has a wealth of information and is written so well that if you have ever (or never) used a code linter, you will understand the philosophy and constraints of linting far better than I can every describe - it is a read worth investing in.

One of my pet peeves on linting was how strict the rules are. Johnson, refers to this in his paper. The example he uses is a number being converted to a character - possible in JavaScript where 1 or one can be used interchangeably and the program will still run.

"The programmer obviously has a strong motivation for doing this, and has clearly signaled his intentions. It seems harsh for lint continue to complain about this." he says, "On the other hand, if this code is moved to another machine, such code should be looked at carefully."

The motivation for linting, therefore arose to make code portable across multiple systems and devices and correcting kinks that may otherwise pass through and block the performance of the software that has been written.

Understanding this motivation behind the creation of linting, significantly helps the radical acceptance of linting as a tool that helps and defends, rather than blocks and annoys.

One of the joys of the paper is the sense of humour, and frustration Johnson expresses for the reasons behind his need for a linter ... "(for various stupid reasons!)" - he says, code can be written badly and this "causes fatal conflicts which prevent the proper operation of the program".

He created a program for linting therefore to detect as many code discrepancies possible.

Shut the lint up

Johnson, in his imitable way, has a section called "shutting lint up" as he says "There are occasions when the programmer is smarter than lint... Some way of communicating with lint, typically to shut it up, is desirable."

The challenge with lint overrides - a more polite term for shutting your lint up - is a lack of clarity on how to do this with your existing linter. Linters work on certain key word commands and new keywords may not be recognised by code compilers. If you see lint overrides, they still follow the same principles set out in Johnson's paper - they take the form of comments, which require minimal preprocessor changes.

"The preprocessor just had to agree to pass comments through to its output, instead of deleting them as had been previously done. Thus, lint directives are invisible to the compilers, and the effect on systems with the older preprocessors is merely that the lint directives don’t work," the paper says.

Lint override strategies

To override your linter commands, it requires a team to discuss which rules should be ignored and how. Style-guides, like airbnb's linting guide for React, prepackages these rules for you.

In Part 2, of this series - the ES Lint config for the code editor, Atom - is the config we used when I was at bootcamp with GA and enforces, what GA believed were good styling guiderails for a linter.

Besides checking style, linters are also excellent tools for finding certain classes of bugs and code inconsistencies that may cause a code run to fail.

You can find this out before the code runs and compiles and fix it. However, it is not a failsafe solution. You may not be able to fix all problems using a lint. Test other tools than can, and should, be used with a linter as it is not a guaranteed method to catch all code smells.

ES Lint for JavaScript

There are different linters for JavaScript, but ES Lint has proved to be very popular as it is more easily configurable. The Codecampus has a good article on why it believes ES Lint to be a better linter for JavaScript compared to other options in the market. Click the english version when you reach the page which is in German.

The airbnb guide is most often used for React projects as it pre-writes some rules for linting with the React component library.

Kwabena Boadu has a great guide to set-up ES Lint with airbnb's style guide.

Style guides can be opinionated and vary - this is an example of an opionated guide - The Arcanist user guide - lint, but reading them always gives you another perspective and challenges your own ways of thinking, opening you out to possibilities that you may not have considered.

Many organisations will write in some overrides or make tweaks to prefab style-guides like airbnb. Some style guides can be very strict and some packages methods may fail linting. For example, with the Formik form library for React, the use of the spread operator, essential to run some methods in the package, fail the airbnb style guide rules.

Another point worth bearing in mind is your repo structure. Monoliths and monorepos have different ways of configuring ES Lint. A monolith, is a repo that refers to packages and Application Programming Interfaces (APIs) outside the repo for its functioning. A monorepo hosts all packages that it depends on within the same repo. An uber-package manager like pnpm or lerna are popular package managers for JavaScript monorepos that use npm packages.

Whether you are working on a side-project, or an enterprise level app, you will add several npm packages to help you with the task you hope to complete. Each of these packages are written by different code writers, to different rules.

While these packages are maintained by the code writers, they are often upgraded, patches added and therefore, you will also need to manage the packages you have used in your code base regularly.

Do take style-guides and rules seriously and save the blushes :-)

Here's a good link to help you understand why linting is a friend not foe. Click the English version when you get to the page which is in German.

The complete series on my blog

Photo by Crystal de Passillé-Chabot on Unsplash

Clean Code - Part 2 code editors and linting

SumiSastri — Thu, 18 Jan 2024 15:36:30 +0000

There are as many code editors as there are coding languages. Before code editors were developed, Notepad and TextEdit on Macs were used or vim - on the computer terminal.

Modern code editors come with many extensions to help code writers write and edit code as well as check formatting and syntax. They also provide you with a linter, which is a tool that analyses your code and flags up errors, bugs, syntax mistakes and incorrect code constructs.

Linting is a programme that can be run to scan your code and keep it clean. As you can imagine, writing lines and lines of code is fatiguing. Nobody writes bad code because they want to. The nature of the beast - code being lines of programmatic instructions that need to be parsed and executed - depends on every indent, comma, spelling and use of a code block being rigid and adhere to rules. This becomes humanly impossible to monitor as you will find if you rely on Notepad, for example as a text editor.

Linting therefore keeps track of code inconsitencies and is 1 tool to use to keep code that smells at bay. For more, here's a good read from freeCodeCamp

An IDE - Integrated Development Environment - is a code editor on speed.

Like all things, choosing a code editor is a matter or personal preference and what you are using the code editor for. Code sandboxes provide a good first step to working on code if all you need is to check syntax, errors and if the code works.

Language specific code editors - like PyCharm - are great for Python. IDE's like Vim and Visual Studio Code, which is what I have migrated to after using Vim, Sublime Text, Scribd and Atom, suits my needs as it has several great extensions and integrates with GitHub seamlessly.

Sublime Text although good for beginners, is annoying as it interupts your code flow with regular prompts to upgrade to a paid version - which you can ignore when you are using it infrequently, but becomes intrusive when you want to code in peace. For a beginner who has gone beyond the useful functions of CodePen, code sandboxes and Sublime Text, Atom is a good free option to set up shop with and start projects in HTML (Hyper Text Markup Language), CSS and JavaScript.

This blog is pretty Mac-centric, so a small note - Commander (cmder) allows you to run the same commands on Macs/ Windows/ Linux - and especially good for windows.

Linter set up - ESLint

Install the following eslint packages globally with package managers yarn or npm

yarn global add eslint eslint-plugin-react babel-eslint

npm install eslint eslint-plugin-react babel-eslint

Create an .eslintrc file - note this is a dotfile

open .eslintrc

if you want to check pre-set linter rules in a code base

In your terminal copy and paste - this programs the terminal to open your code editors

code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}

After you should be able to now use VS Code with the command code . or Atom with atom .

Vim - the IDE everyone loves to hate

Vim is an editor that is on every Mac terminal by default. All you need to do is type vi in your Mac terminal and the IDE fires up. Type I (insert and edit), escape from the command mode. You can quit :q (quit), :qa (quit all tabs the quit commands do do not save edits). The command for editing is to write and then quit :wq (write and quit) or :wqa (write and quit all tabs).

Created by Bram Moolenaar in 1991 as an upgrade from the 1970s version, Vim is free, open-source and light-weight. It is easy to use but for the unfamiliar, a bit clunky and the vim commands can be a bit difficult to understand, at first.

This guide might help. I use Vim, when I have to - for adding configs and some other tasks, but it is not my preferred IDE. However, this is a great guide if you want to check it out - codecademy guide and freeCodeCamp provides a more detailed guide.

Atom set up and linting for JavaScript

If you are using Atom as our text editor of choice. It's similar in many ways to Sublime Text, but it has a nice user interface and a lot of 3rd-party plugins and packages that we can use to help us code more efficiently, and hopefully make fewer typos along the way.

To use and install:-

Download Atom.
Copy it into your Applications folder, and add it to your dock.
Open Atom and click on the Atom menu then Install Shell Commands
Un-check the box on the left hand panel Show Welcome Guide when opening Atom
Type cmd + , to open the preferences. Click on the Themes tab and set the UI (User Interface) theme and the syntax theme to One Light
In the Core panel, make the following change:
- Exclude VCS Ignored Paths - uncheck
In the Editor panel, make the following changes:
- Show Indent Guide – check
- Show Invisibles - check
- Tab Type > soft
- Copy and paste the following command into the terminal - this installs options to edit, clean and lint your code keeping it clean without manual intervention
```
apm install auto-indent atom-ternjs file-icons language-ejs language-babel linter linter-erb linter-csslint linter-eslint linter-js-yaml linter-ruby open-in-browser ruby-block pigments sublime-style-column-selection
```
Atom has a package called atom-linter that we can configure to work with eslint to check our code as we type. We'll set up this next. We're going to define a set of rules for eslint to use. From the terminal, run the following command:
```
atom ~/.eslintrc
```

You might come across some blue notifications on the right hand side, just say yes to all of the installations. Cut and paste the following text into the file you just opened in Atom. This JavaScript Notation file (.json file) runs the linter's scanning and programming function through your code base.

  {
    "env": {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "node": true
    },
    "plugins": ["react"],
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "globals": {
      "angular": true,
      "$": true
    },
    "parser": "babel-eslint",
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 7,
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "rules": {
      "brace-style": "error",
      "camelcase": ["error", { "properties": "never" }],
      "comma-dangle": ["error", "never"],
      "func-call-spacing": ["error", "never"],
      "eqeqeq": "warn",
      "indent": ["error", 2, { "SwitchCase": 1 }],
      "key-spacing": ["error", { "beforeColon": false }],
      "no-console": "off",
      "no-fallthrough": "warn",
      "prefer-const": "error",
      "quotes": ["error", "single"],
      "semi": ["error", "never"],
      "react/prop-types": [0]
    }
  }

And now save the file in Atom with cmd + S.

Keeping your code indented is so important and because of this we are going to give you a shortcut to automaticly indent all code in the file you are viewing. Whilst on atom:

click on "Atom" in the topbar and select Keymap...
Add this to the bottom of the file
This yaml (.yml file) is a lightweight script that formats your editor's indenting functionality for your

  "atom-text-editor":
    "cmd-shift-r": "editor:auto-indent"

Save file and cmd + shift + R will be the shortcut to auto indent!

Cleaning up and linking set up Back in Atom's preferences

Click on the packages tab and search for the linter-eslint and click on "Settings" for this package.
Find where it says .eslintrc Path, set it to ~/.eslintrc
Make sure the box for Disable when no ESLint config is found is unchecked
Set Global Node installation Path to /Users/username/.config/yarn/global, replacing username with your username. If you are not sure what that is ask your instructor for help.
Check the Use global ESLint installation checkbox Now quit Atom and you are ready to use it.

VS Code and my favourite extensions

If you are using VS Code as our text editor of choice and a mac, you can download it and read the
Documentation. Once you have used Atom, you will find VS Code easy to use and intuitive. Some useful keyboard shortcuts for reference

Some quick ones that are handy cmd plus

a selects all + c copies + x cuts + v pastes + z undo
b toggle open and close side bar with file names
d - find next match of a word - word by word
f finds a word at file level
f2 finds and selects all occurances of the word and you can change all occurances
p opens a new file allows you to switch between files double click the tab to keep it permanantly docked in the tab
k opens a preview mode tab hit enter allows you to keep it permanently docked in the tab you have opened

alt plus

arrow up moves selected line of code up the arrow down moves the code to the line below

alt plus shift plus

arrow up or down duplicates the code line selected 1 line up or down

cmd plus shift plus

e - go to explorer
f - go to finder

control plus shift plus

g goes to the files you have changed

cmd plus option plus

s saves all open files

Once you use these commands often enough, they become a part of your DNA and you will do it without thinking :-)

VS Code extensions - my go to list**

Prettier - code formatting
VSCode pdf - save pdf's and read them in vscode
Bracket pair colorizer - colors pairs of brackets to identify code blocks
Live Server - opens html files serves it on a real port
Live Share - share code and collaborate
Markdown pdf - markdown for pdf's
MPEG-4 Preview - saves mp4 files that you can view in the IDE
Prettier - cleans up formatting
Thunder client - great for Application Programming Interfaces (APIs) and a substitute for postman so that you can work on APIs and check data within the IDE

VS Code extensions - how long is a peice of string

There are a ton of extensions which can be used - I have tried some of these and removed them as I don't need them on a day-to-day basis. You will develop your own list of faves too...

Advanced new file - allows you to run >new file gives you a drop-down selector to show file paths you can put the new fiel in
Better comments - if you add comments highlights it in different colors
Quokka - javascript playground/ scratchpad/ sandbox
Polacode - generates snippets to share in other files
Bookmarks - use it to mark blocks of code and toggle between codeblocks in files
Cloak - hides .env files and api keys/ passwords
CSS Peek - checks css code by class and id
Debugger for Chrome - for html and vanilla javascript
DotEnv - different colors for different variables
EditorConfig for VSCode - team formating of code
ES7 React/Redux/GraphQL/React-Native snippets - code snippets for React-Redux When to use code snippets (https://www.freecodecamp.org/news/definitive-guide-to-snippets-visual-studio-code/)
FaunaDB - for databases
Kite - ai code intellisense
Import cost - file sizes

While this is only a small sample, if you want to know more about how to choose and editor and what's out there, Hostinger has a good summary that is worth checking out.

The complete series on my blog

Photo by Crystal de Passillé-Chabot on Unsplash

Clean Code - Part 1

SumiSastri — Thu, 18 Jan 2024 15:33:41 +0000

What is clean code?

There are some that are of the view that if code works then does it matter if it is clean. It works right?

But code written any how, in any way means that someone else reading our code - or even our future selves - may not understand the code when we see it again. It becomes a cognitive waste of energy trying to decipher it.

There is a value and effort put into writing code therefore it stands to reason that some value and effort must be derived from reading it, running it and maintaining it.

Even if clean code is written just as a matter of self-development, that is in my opinion, a goal worth achieving. It gives you mastery over the code you have written, therefore an ability to transfer that knowledge. It provides autonomy, self-sufficiency and the confidence, perhaps to write new and better code. There is a sense of purpose and a clarity of direction writing code that you and your team are proud of, and of course if it does not work, it isn't code. So it must work but also work hopefully elegantly and efficiently.

Clean code benefits organisations

Even if clean code does not benefit the individual code writer, surely, clean code is important as it provides organisations with code that they can sell to their clients as it is both reliable and predictable.

Refactoring code, writing it better, removing legacy and tech debt makes existing customers trust the software they are using and inspires hopefully both trust and confidence.

From a commercial point of view renewals and retaining customers is doubly important - long-term revenue - compared to new customers where the costs of acquisition are high.

Today, tech is everywhere. AI is no longer the realm of geekdom. Computers, personal laptops, wearables, phones, tablets - there is software everywhere. In weighing machines, slot machines, teller counters, CCTV cameras, doorbells, washing machines - tech is now both useful and intrusive.

Code impacts lives so the cleaner code the better

I am not particularly keen on virtue signalling or talking about the moral responsibility of writing clean code. I am interested in the side-effects of writing bad code - law-suits, repair costs, product recalls.

Non-tech professionals will blame code writers for badly written code - look at the Volkswagen emissions case, or the privacy intrusions of search engines and social media software.

Scapgoating of dev teams and individual code writers have a terrible impact which could be loss of livelihood, reputation and worse - fines and imprisionment.

Keeping code clean therefore becomes an armour a sword of protection. And it does not have to be difficult.

For organisations it is a high cost and training and development of tech teams is as much an investment in your product as other research and development investments.

Design and clean code go hand-in-hand

Working to a robust architectural design provides code with a strong foundation. To the architect, lies the task of figuring out if is the structure intuitive and the patterns clear. For the code writer, if the architecture is not well defined talk with other people in the team and work on a shared understanding of the design-patterns you will use as a team.

Often, as a code writer, you are writing on a body of work that already exists. It becomes easy to iterate already established patterns. Search for a good example you can follow: webhook, service, unit tests, integration tests, etc., there will be several your fellow code writers have invested good time writing. Follow their lead.

Often, unfamiliar code becomes an excuse to describe something as high effort. Let it serve as a signal that you need to invest in learning the approach. Work on a side project, check the code out, make your mistakes in a sandbox.

All code needs to be maintained, clean code needs less maintenance

Code smells appear when code rots. Every line of code that you write should be read multiple times as once written, code already begins the decay process. My checklist in no particular order:-

Remove commented code (or anything similar, debuggers, etc.)
If something is not in spec leave it out
Check that you have added tests
Think about code dependencies
Work on tech debt and legacy to see if you can update and renew your code base
Heavily coupled or unclear code is very difficult to change
Value objects over arrays - they make the interface more obvious/ help to keep them cleaner
Avoid private methods as they are difficult to test, and could hide complex logic
Write better functions
Is there too much bloat in your code - is there something you can refactor that works more efficiently?
Contra-intuitively to the above, if 2 lines makes your code clearer, maybe 2 lines is better than 1 line - don't be a slave to writing DRY (don't repeat yourself) code
Write better variable names - 'n' - finally what is 'n' ? Any number of things if you come back and try to decipher it or someone else needs to decipher it - waste of cognitive energy isn't it easier to understand a variable that is let number = () => {} Instead of n which could mean infinity as well
Think about the packages/ libraries you add - are they performant, well-maintained, do they compile well, are issues reported and fixed

Uncle Bob says ...

Much of this blog is inspired by watching Uncle Bob's, also known as Robert C Martin, YouTube videos when I need inspiration. Here are some of my key take outs from what he says in simple terms.

is your code easy to understand
does your brain relax when you read the code
does it read like good prose
does it step up from most important first - code execution - to least important last - gives parser place to exit quick
does the way the function you write start with simple first to complex later

For those who don't know this industry maverick check this video out

I am sure this conversation will grow. I am sure there will be many disagreements. There will definitely be divided opinions about what is clean code.

That's great! Let's start talking more about it. And for sure, doing more as a result of all of the talk. So let's keep it clean (both the talk and the code!).

Uncle Bob may disagree - as he says "let's not ship sh$@!X%".

Photo by Crystal de Passillé-Chabot on Unsplash

History of the Web - Part 2

SumiSastri — Wed, 17 Jan 2024 14:00:14 +0000

Enter the browser with the JavaScript dragon

With the introduction of JavaScript to the World Wide Web, or the Web, Brenden Eich its creator and co-founder of Mozilla, did not anticipate the browser wars and the host of controversy that JavaScript brought to the rapid growth of the Web and mobile apps.

At a 2-day full-stack conference hosted by Stack Skills, speakers reflected on the good-old-days of Web 1.0 and the risks that the introduction of JavaScript created, if you are interested in this section read Part 1 - A love letter to the personal website

While HTML (Hyper Text Markup Language) is just text and CSS (Cascading Style Sheets) enhanced a web page with HTML attributes for layouts, design, colour and animations, JavaScript took web-development to another level of interactivity.

JavaScript allows the user to interact with every HTML element and change its behaviour. This event-driven behaviour is based on the users’ interaction with the Web - mouse and key movements, clicks on the page - offering a whole new way of looking at web data and analytics.

Web 1.0 from static sites, with text and some styling but with limited user interaction, transformed and JavaScript allowed users to now interact with pages - click buttons, see sliders and animated picture galleries, play interactive games.

However Web 2.0 is not just about JavaScript that the user can interact with, it also about JavaScript accessing DBs (databases) with Application Programming Interfaces (APIs).

Every hardware developer wanted a JavaScript engine to parse the Web documents so that users who were adopting personal computers and interacting with the Web could have a better user-experience (UX).

Microsoft kicked the ball into play with Internet Explorer, google followed with Chrome, Apple with Safari and Mozilla with Firefox. Many other niche market players emerged, made inroads into the market, many got burnt and/ or suffered decay.

UX design became more important and JavaScript frameworks like google's AngularJS, or Facebook's user interface library called ReactJS, burgeoned and grew to enhance the developer experience.

The real disruptor was mobile technologies with the emphasis on technologies that supported mobile-app development.

Given this shift from web applications to mobile applications, Bruce Lawson’s look under the hood of the browser wars with a talk called "Internet Explorer - Rest in Peace (RIP) or Be Right Back (BRB)?", explored the history of the browser in the evolution of the world wide web.

While the browser wars raged in the 1990s, today Safari has been taken to task for not using Chrome, Internet Explorer, Firefox, or any other browser on its mobile devices, he said.

Apple phones and i-pads mask these browsers and use Safari, which users see and interact with. However, the UX with Safari is so poor that users often prefer Android mobile devices. A plurality of browsers perform so much better on speed and efficiency, Lawson said. As of 2025, Apple in Europe under the Digital Act will be obliged to change this anti-competitive behaviour, he added.

I'm going to the garden to eat bugs - big ones, fat ones, round ones, curly ones

Browsers, and JavaScript with all its avatars, also bring with them the joy of bugs.

Gabriel Manor-Leichtman’s in-depth look at browser developer tools to help debugging code and network performance issues was worth reviewing once again for its rich content and useful guidelines on the online playback of Stack Skills conference package.

Loosely typed JavaScript, and its bug-ridden code, can partially be tackled with the stricter TypeScript superscript.

TypeScript, has uses well beyond the frontend, as Ryan Cormack from the online card and gifts site, Moonpig, pointed out. Using Amazon Web Services (AWS) which compiles down to Cloud Formation, you can move JavaScript code and embedded data from the frontend to the backend of apps with TypeScript lambda functions.

This does not come without its trade-offs, Cormack said, you need to write imperative (versus declarative) code if you use YAML (Yet Another Markup Language - also known as YML) compilation, deal with constant code updates and have at least a foundational knowledge of AWS, which has its own learning curve.

A way through this maze of JavaScript options is to choose the option of creating micro-frontends to scale and deploy complex apps, Teresa Wu said, demonstrating how the Chase App worked.

Chase’s banking app looked the customer journey from onboarding through to off-boarding with each segment of the UX built with strategic intent and collaboration but released in operational isolation to speed up the process of development and ensure each moving part of the app worked efficiently.

Micro frontends, Wu said, helps modularisation. For example, customer navigation through the app can be tested as the journey changes. This offers flexibility where it is needed. Navigation (the main - entry point for the customer) is wrapped in routine logic but when authentication of the user is required, authentication logic and a more centralised logic is used. This works, like a proxy, Wu said, where the two sets of logic reference each other. All of this helps scaling web and mobile apps.

Testing and data availability challenges with JavaScript

Testing also becomes an imperative with the introduction of JavaScript and the multi-device nature of application development.

Going through the testing pyramid, Rob Richardson, talked about the need to create a testing strategy where fewer end-to-end or integration tests were written with thought and intent while several unit tests constantly tested code blocks.

Code testing is also more complex as the developer shifts through environments - developer, staging, integration, and production with different tests required at each of these stages of code build. Infrastructure has also to be taken into consideration.

Availability of data also becomes a challenge with testing. Due to higher levels of regulation on data-security, not all developers see all the data. With data not visible, it becomes difficult to do a proper root-cause analysis and reproduce a bug locally. It is also not easy to define how much data you need to see to test the bug. With regulation preventing access to the amount of data a developer has access to loggers and tracing tools as well as remote debugging are options to live or local debugging, Richardson said.

Specifically testing for mobile devices and browsers on different platforms is part of the integration testing that Web 2.0 developers need to consider.

Fun, fun, FWAs?

A little left field was the option to build Functional Web Apps (FWAs) with Web Components proposed by Simon McDonald. Web Components are APIs to different web platforms that help you create custom HTML tags and design your app pages.

FWAs solve the challenge that developers face with Dynamic Web Apps (DWAs), JAM (JavaScript, APIs and Markup) stacks and PWAs (Progressive Web Apps), McDonald said. Markup refers to the styling from CSS stylesheets that marks up HTML text blocks helping in layouts and organising chunky blocks of text.

DWAs consume APIs from external sources, the complex modern system of libraries and tooling services that they bring, result in the constant converting of modern JavaScript code back into vanilla JavaScript that browsers understand.

DWAs require debugging with source maps for multiple branches of code as well as maintenance of versions of code updates with patches and breaking changes.

All this makes for a poor customer experience (CX), as well as developer experience (DX). Background jobs like cron jobs are clunky and infrastructure as code may solve some of these challenges, but not all.

The JAM-stack which relies on HTML, CSS & JavaScript mashed-up into one artefact has its own trade-offs, McDonald said.These are slow builds, not really a full-stack - the rehydration from API calls to the frontend is slow and not always secure.

PWAs are built on HTML, CSS and JavaScript rather than traditional mobile-app languages like Swift or Kotlin. They are accessed through a browser. To enhance the speed of dowloading PWAs use pre-processors to format and minify code. A pre-processor, takes out all the empty spaces in a code block (minification) and formats newer versions of JavaScript to a version that browsers recognise.

When a website is created a tree of all the elements called the DOM (Document Object Model) is built. To shake out the fluff from every branch of this DOM-tree, pre-processors have to delve into a complex mesh of HTML elements. A process called layout-thrashing or DOM-tree shaking. With complex nested DOMs - as more pages and complex layouts, API calls are made, this process of layout-thrashing and DOM-tree shaking can become a headache.

FWAs, on the other hand, with their HTML first approach offers dynamic personalisation and assistive technologies built in by default.

FWAs are built using functions as code, programmed on the server using managed DBs making deployments more efficient.

With this enhanced control comes a better CX, inclusivity, speed and even a better DX with less maintenance and breaking changes from versions of code updates.

The cons are that code must be loaded in memory in the machine and this is limiting in terms of the time taken to parse the code and then run it. Not all DBs are able to fill this requirement.

Emergent DBs - Cosmos (Azure), DynamoDB (AWS), PlanetScale, a relational DB or Fauna and document-style DB (independents not linked to any big cloud provider) - fill this gap, he said.

Another challenge with FWAs is infrastructure as code is complex, as Cormack highlighted earlier in the day. DBs are often linked to a cloud-based service you must decide on the cloud service provider you are going to use and go all in with AWS/ Google/ Azure.

This all is may not be the optimal option for some organisations. The BBC has gone down this route and for more inspiration, McDonald pointed to resources Begin to explore the option of FWA suitability.

As a total aside, fun-fun functions is a great YouTuber - sadly taking a sabbatical but a great Web 2.0 site to checkout and total inspiration for the subhead I chose for this section...he will be more sadly missed than Web 1.0 imho :-).

My dev blogs home page

Additional Resources

History of the Web - Part 1

SumiSastri — Wed, 17 Jan 2024 13:54:55 +0000

While the internet has been around for longer than the the World Wide Web, or the Web, in today's day and age the Web is changing so rapidly.

It is worth taking a look back into where it all started.

A love letter to the personal website

If we thought Web 1.0 was dead, a 2-day Stack Skills conference in London (2022), considered it fun to resurrect that dead thought from the grave. The conference focused on the history of the Web, Web 1.0, Web 2.0 and challenges ahead for Web 3.0.

Full disclosure right up front.

This site is the result of the influence that the speakers had on my thought processes as an emerging developer.

Topics covered

What is the difference between Web 1.0, 2.0 and 3.0 ?

Dangers of the cancel culture for Web 3.0

Pure CSS Games - hey no blinking JavaScript

Assistive technologies - why Web 1.0 worked better with just HTML

Additional Resources

What is the difference between Web 1.0, 2.0 and 3.0 ?

The theme of the 2-day conference, was to take us through a brief history of the World Wide Web, or the Web, starting with HTML (Hyper Text Markup Language), reminding us that a combination of HTML and CSS (Cascading Style Sheets) are perfect tools to build any website. All that JavaScript added was the browser wars and bugs...

Here is a brief time-line of the transition points between the 3 versions of the Web:

1980s and 1990s - The Web, which was invented by collaborators, Robert Cailliau and Tim Berners-Lee in the 1980s, was conceived as a document sharing amongst academics, was built on HTML, with URLs (Unique Resource Locators) - that linked the documents and gave academics access to scientific research.

Web 1.0 started as a document storage and sharing experiment at a particle physics organisation, CERN, the introduction of CSS in the 1990s, by Håkon Wium Lie, ideas which he developed with Bert Bos, provided more opportunities for pepping-up the typewriter-style printed page that was a bit dull and difficult to read.

Sophie Koonin's introductory talk, “A love letter to the personal website,” was a tribute to the loss of the personal websites of the 1990s - websites for the creative pleasure of the individual not for profit of conglomerates.

Kooky sites like Sadgrl, Koonin demonstrated were examples of the next phase in the development of the Web where people built sites for fun, self-expression and creativity.

It was not just with content, but with top-level-domains (TLDs), that content creators showed creativity.

TLDs are the final extension of a web name, for example .com. If you look at the sites, https://carol.gg/ and https://ghost.computer/ the unusual TLDs were expressions of the individual. Today, everyone wants a .com which is easily recognisable globally.

Even if TLDs were not creative, secondary-domain names, which are the memorable part of the domain name, before the .com extention, were truly memorable - https://lynnandtonic.com/ and https://darn.es/ showed the creative flair that early developers had.

Some of this creative flair has been retained, Koonin concedes, google being an example. Today's creative naming seems to be more about brand building than self-expression. This is the point of difference between a name like lynnandtonic which simply was an expression of Stephanie Eckles, a CSS specialist's creative flair, Koonin pointed out.

Another common feature of these sites are they are all built in HTML and CSS with no JavaScript in sight. The purpose of early websites of the 1990s were to be creative and full of personality to mark the developer's individuality on the Web.

Web 2.0 was coined in 1999 by Darci DiNucci, whose personal website displays all the characteristics of Web 1.0 static pages - no email form, you need to download a CV which is stored on a URL rather than a database, limited CSS and no JavaScript. The name Web 1.0 was retrofitted by DiNucci, a UI-UX and technical writer, to differentiate Web 2.0 which was more feature rich.

One of the early movers to shift the dynamic of the Web, as a document storage system for academics and researchers, was the content generator, My Space. The site started the shift towards UGC (user-generated-content).

Web 2.0, played to DiNucci's strengths - a focus on the user-experience(UX), personalisation of the user-journey with UXD (UX-Design frameworks), data stored server-side with Application Protocol Interfaces (APIs) making it easy to use a variety of resources on a web page.

The increased use of APIs, along with improved UI-UXD, encouraged more users to post blogs, comments, reactions, photographs, images making the Web more interconnected and devices and infrastructures more interoperable. At this stage UGC was the shift from developer-generated content.

As a precursor to Web 2.0 where UGC was more common, in Koonin’s opinion, was the success of MySpace which ruined the Web for indie sites. The term Web 2.0, was only widely adopted in 2004 in a conference where DiNucci's original terminology to differentiate the 2 versions of the Web was viralised.

The general word of caution on Web 2.0, from Koonin, is that although it has influenced a whole generation of content creators to flock to social media sites, it has also spelt the death of the creative impulse of self-expression and a risk towards all sites looking like cookie-cutter imprints of each other. If you do see the My Space site, for example, it has suffered from this general trend.

While individuality is lost and customisation is limited, the real danger lies in algorithms harvest data and generate feeds of echo-chamber information, Koonin said.

The discussion about Web 3.0 started around 2006, where mobile distruption and bigger data with all its infrastructure, capacity and privacy issues grew exponentially. Social media sites which started with MySpace, today include Facebook, Instagram, TikTok, YouTube, Twitter and the like, have resulted in a more ominous trend - the cancel culture, Koonin said.

Dangers of the cancel culture for Web 3.0

Web 3.0 is not really a "thing" as it has not been designed, defined and its characteristics - big data, use of emerging technologies like AI (artificial intelligence), ML (machine learning), block chain are making significant departures from what Web 2.0 looked like.

Koonin also said Web 2.0 needed a reset as the cancel culture will slowly lead to content loss when these sites are taken down as a UGC provider is in the eye of a social media storm.

Content generators now need to think of uncreative content guidelines - search-engine-optimisation and other engagement metrics as well as social and political correctness - taking the fun out of building a personal website.

Emergent technlogies like AI, interconnected devices with IoT (the Internet of Things) and NFC (Near Field Communication), will alogorithmize content many human interactions. This has the potential of rendering content we consume devoid of human intelligence and actions we take devoid of human intervention. This will all be in the name of convenience, speed and removing the nature of individuals, prone errors and creative rather than programmed logic.

Pointing us to Indie Web and Yester Web which aim to “reclaim the Web,” the movement encourages developers to harken back to the past and create a personal website which is not dependent on pre-built templates like WordPress, Wix and Square Space offer but on vanilla HTML and CSS.

Koonin suggests we turn this paradigm on its head and join the POSSE - the movement to Publish on your Own Site and Syndicate Everywhere.

The challenge for developers with this spartan approach - using pure HTML and CSS - is the lack of tools and options that JavaScript offer.

A shibbolith that Elad Schechter, who was the next speaker, aimed to dismiss. It is hard to convince a crowd of developers who are keen to learn the next best thing that going backwards is the way forwards, but it certainly made me think in new ways about how to approach what has become a significantly over-engineered space.

Pure CSS Games - hey no blinking JavaScript

Schechter, talk “How to Create Pure CSS Games”, used clever CSS tricks like checkboxes and radio-buttons with CSS animations.

Schechter ran through how he created a CSS counter for his games and animations. Pseudo classes, sibling selectors in conjunction with CSS animations like transform-rotate helped providing an illusion of movement - proving you do not blinking well need JavaScript.

He did caveat-emptor this by saying he used an HTML pre-processor. A pre-processor takes HTML and CSS code and processes it in advance so that it renders more efficiently (quickly) on the Web.

Schechter created atoms of coronavirus with blinking eyes, elements appearing and disappearing, movement of these atoms across the page using and CSS attributes like display-block and display-none or setting opacity at various levels.

Worth checking out is Elad2412 on CodePen for more inspiration.

Assistive technologies - why Web 1.0 worked better with just HTML

On a more serious note, Sam Prioux, highlighted how Web 2.0 creates more complexity and less accessibility to visually challenged users.

Web 1.0 offered text-to-speech screen readers and since most of the Web was HTML, this made the early Web much more universally accessible. Text could also be printed to braille.

Today with text layered with images, audio, and video there are still tools to make the Web more accessible. Command Line Interface (CLI) tools, image recognition tags, voice recognition, video-magnification, and accessibility APIs.

Hardware and software developers, Prioux said, need to work together as computer central processing units (CPUs), and compute-power, can be slow with speech recognition. Commercial assistive technologies are in their infancy and need to be further developed.

Web 2.0 and mobile disruption with touchscreens, more event-driven behaviours on-clicks, on-blur, on-mouse-in and out, icons that point to these events, rather than words made Web 2.0 a difficult space to navigate for those who needed accessibility to be built into the programming and hardware.

Event-driven behaviour is when the user is expected to interact with a web page for an action to occur. In the examples above, when the user is expected to click a link, if they hover over a form field that then becomes blurred to the vision, when the mouse is moved on a trackpad.

It was not till Apple introduced touch-screen accessibility that hardware caught up with the needs of computer accessibility to the community who needed additional support, Prioux said.

However, web standards for accessibility, browser extensions and API capabilities are still not fully understood and both hardware and software developers need to think of future accessibility not just play catch up. AR (Augmented Reality) technologies like VR (Virtual Reality), new crypto currencies - are just a few Prioux mentioned.

He also warned of privacy and biases in the field of assistive technology. A lot more work needs to be done with the community in UI-UXD (user-interface and user-experience-design).

Prioux, provided an inspiring and insightful look into the plethora of options to be creative and ensure accessibility to prevent abuse of privacy and stop biases across devices.

AI promises to revolutionise accessibility, he also pointed developers to think of customisation for accessibility or creating separate but equal experiences for assistive technologies that help the enjoyment and ease of use.

On a seriously light-hearted note, Herve Aniglo, talked about teaching children to code with music using Sonic PI, a language agnostic platform that helps you learn recursions, looping, circuit breaking and functional programming by creating simple tunes.

Python, JavaScript, and Ruby are languages that can be learnt by programming sounds for synthesisers. Conversely, it is also a tool for programmers to learn how to read and write music.

Music and sound, Aniglo said, bring tech to a wider audience and is a great introduction to children learning the Web. One of the sections on Berners-Lee's site is the section for kids where he explains particle physics in simple terms. It is also a great reference for Koonin's examples of a Web 1.0 site.

In Part2 - Enter the browser with the JavaScript dragon, I have aggregated the talks on JavaScript together to tell a story. The theme of this next section questions if JavaScript really the big, bad wolf of the Web or just another coding language, a tool at our disposal.

My tech blogs home page

DEV Community: SumiSastri

What is the difference between Bash shells and the Bash Script?

What is the difference between scripting languages and programming languages?

The characteristics of programming languages that are incorporated in the Bash script

Pros and cons of Bash

EXTERNAL REFERENCES - What is the difference between Bash shells and the Bash Script?

Computers and computing in the mid-20th century

From Lovelace to the ENIAC

The EDVAC and separation of compute, control and memory operations

Life before personal computers

EXTERNAL REFERENCES - Computers and computing

What are Github Actions and how to set them up

Setting up GHA configuration or config files

The difference between issues and PRs

The config.yml file

What is YAML?

Fields in the config.yml file

How to protect your main or master branch with GHA

How to protect sub-branches with GHA

What is the difference between monoliths, microservices, monorepos and multirepos?

What is the difference between monoliths and microservices?

What is the difference between monorepos and multirepos?

Is a monorepo a monolith?

Git, Git 'heads' and branch management

Git heads and the Merkle tree

Adding, commiting, staging and pushing code changes up the Merkle tree

Creating your first branch and sub-branch

What is an SHA and how Git uses it to track code changes

Merging branches and SHAs

What does a blob refer to in a git branch and how does it relate to origin head?

Code snapshots an organic way to capture code as it is changed

Clean Code - Part 3 how linting works

From Johnson's original white paper on linting

Shut the lint up

Lint override strategies

ES Lint for JavaScript

Clean Code - Part 2 code editors and linting

Linter set up - ESLint

Vim - the IDE everyone loves to hate

Atom set up and linting for JavaScript

VS Code and my favourite extensions

VS Code extensions - my go to list**

VS Code extensions - how long is a peice of string

Clean Code - Part 1

What is clean code?

Clean code benefits organisations

Code impacts lives so the cleaner code the better

Design and clean code go hand-in-hand

All code needs to be maintained, clean code needs less maintenance

Uncle Bob says ...

History of the Web - Part 2

Enter the browser with the JavaScript dragon

I'm going to the garden to eat bugs - big ones, fat ones, round ones, curly ones

Testing and data availability challenges with JavaScript

Fun, fun, FWAs?

Additional Resources

History of the Web - Part 1

A love letter to the personal website

What is the difference between Web 1.0, 2.0 and 3.0 ?

Dangers of the cancel culture for Web 3.0

Pure CSS Games - hey no blinking JavaScript

Assistive technologies - why Web 1.0 worked better with just HTML

Additional Resources

The `config.yml` file

Fields in the `config.yml` file