Http 301

Interviews are sometimes very interesting as they can point out where you are missing some key information in what you know. In an interview last week I was asked how I would redirect a browser to a new URL.

I immediately suggested using a page with a redirect imbedded using JavaScript – I’ve done this a few times :). The interviewer then gave a hint of status codes…..

I know all about HTTP status codes (2?? = success, 3?? = redirect, 4?? client error, 5?? server side error). And I have used a number of the 200, 400 and 500 errors. So I knew that code 300s was for redirect but I had never actually used them to do so.

I spent some time over the weekend just working out how to do a redirect using 301 – Permanently moved – just because I had never done it before….

So here is how to do it in PHP

http_response_code(301);
header(“HTTP/1.1 301 Moved Permanently”);
header(“Location: “.$newurl);

Mainframe to Cloud – a short history

To understand Cloud technologies we need to understand the older technologies. Cloud is often considered an evolution of existing technologies rather than a brand new technology and start building software in a cloud-first view, rather than how it compares to older technologies. But, as the cloud evolved from older architectures the comparison will always remain.

So a short history lesson:

In the beginning was the mainframe, a single large computing hub, with terminals (screen and keyboard) that were distributed where people sat and did their work. While it looked like people were doing work at a computer at their desk the computer was actually in the computer room and they were working on what was termed a dumb terminal as it had no processing capability of its own.

Then came personal computers which moved the processing to the desktop. Personal computers were often linked to a bigger computer in the backend but had processing capabilities of their own, CPU, memory, and storage. The personal computer originally had all the programs installed as applications on the device. These programs would then make network calls to a database sitting somewhere else that would answer queries that the application would display to the user. This was called client-server (client = desktop, server = database)

Client-server then evolved into a three-tier technology. Some of the processing that the desktop was doing was moved to a server, so the client application started displaying information to the user instead of processing the data, processing (and database access) was handled by the server layer. If this sounds similar to the web, in a way it was, but instead of using a browser you would have had a custom-built interface doing the display.

But, the internet and browsers were the next progression, where instead of installing a client on your machine you could just access the application through a web browser. Originally the web browser would access business applications installed on a web server within the companies own data center (the same data center where the mainframe used to live). The database was also hosted within the data center, so everything was on-premise managed by the companies own IT staff.

Now this is where the cloud comes in ????

Cloud providers started making the servers available in their own data centers and allowed other companies to buy access to the servers. The servers remained in the cloud providers’ ownership and companies rented them. The original servers were just the same as the servers that IT was installing in the data center so this was Infrastructure as a Service (IaaS).

But many companies did not want to worry about the installation of server software on the IaaS servers they were renting so the Cloud providers started doing the installation themselves and sold access to the software level for hosting applications rather than to the whole server, in other words, they started selling the platform for applications (PaaS).

Big software companies were still selling software to companies who were then installing the software either on-premise or at the cloud data center. But this still required the company to have its own IT team who understood the software. So many big software companies started selling the installation services as part of their offering so in fact, the customer was only buying the software pre-installed somewhere in the world (SaaS).

PaaS still linked the software developers were making to a specific platform. So, cloud providers started allowing the upload of just source code that could be run when required. These functions were therefore independent of a specific platform people had to rent and would run and be charged for only when used (Faas). The advent of FaaS has also started the term of ServerLess computing. ServerLess is the ability to write and deploy code without ever having to worry about the Infrastructure or Platform the application is running on. This allows developers to write code and load it to the cloud and the whole system works without anyone knowing where it is actually installed.

Cloud providers have now started making many other platforms available to companies. For example, containers can be run on the cloud, or machine learning training can be done in the cloud. Each of these becomes a new service and could be abbreviated to <X>aaS e.g. A.I.aaS or Containers as a service.

Cloud providers are continually adding new services. We have already run out of <X> letters for services and only a few are ‘official’ abbreviations anyway. As the cloud expands we will be provided with new services all the time, as IT professionals we need to be aware of as many services as possible, though it will be impossible to know them all.

Custom Bootstrap using Sass

I’ve known about SASS for a long time but never took the time to learn how to use it. For a new project (a University project) I wanted to use Bootstrap but also wanted custom colors on the website. Instead of creating my own CSS I decided to stick with Bootstrap but learnt to modify it for my own color palette.

The project is around COVID-19 and medical testing. As such I wanted to use a custom pallet of

Green representing Health

Blue standing for Medical personnel (Professions)

Yellow for Happiness

I spent some time working out how to achieve this in Bootstrap’s provided Scss files. It was so easy that I felt a bit of a fool that I had not learnt this earlier!

Prerequisites:

Before following this guide, you will need to have Nodejs with NPM installed.

To start lets create a webpage that displays some buttons using Bootstrap. Download boot into the web project (I downloaded Bootstrap sources from https://getbootstrap.com/docs/4.5/getting-started/download/ ). Unzip the sources into the webpage directory.

No alt text provided for this image

My HTMl file contains

<html>

   <head>

       <link rel="stylesheet" href=" bootstrap-4.5.3\dist\css bootstrap.css" />

   </head>

   <body>

       <h1>Custom Bootstrap using Sass</h1>

       <span class="btn btn-primary">Primary</span>

       <span class="btn btn-secondary">Secondary</span>

       <span class="btn btn-danger">Danger</span>

       <span class="btn btn-health">Health</span>

       <span class="btn btn-prof">Prof</span>

       <span class="btn btn-happy">Happy</span>

   </body>

</html>

Which, when viewed in a browser looks like:

No alt text provided for this image

A standard looking Bootstrap example of buttons. The last 3 buttons have classes that do not exist so just get ignored and the standard class=”btn” is used for them.

To start customizing the Bootstrap css we need to install the sass compiler. Using NPM run the following command

npm install -g sass

This installs SASS globally so we can run it from any project. Now I can start customizing boostrap to meet my requirements. First I modify the _variables.scss file found in the bootstrap scss folder. Before I get to custom colors, I’ll just change the primary color to check that my configuration is working correctly:

No alt text provided for this image

For my test I am going to change the primary color to red instead of the normal Bootstrap blue.

Change line 67 to

$primary:       $red !default;

Save the file and now I can compile the Scss into css. In the terminal I run

sass C:\projects\Sass1\bootstrap-4.5.3\scss\bootstrap.scss C:\projects\Sass1\bootstrap-4.5.3\dist\css\bootstrap.css

This command overwrites the originally downloaded CSS file. You could instead place the output file anywhere, for example in a \css directory in your project

Now refresh the web page

No alt text provided for this image

We have effectively changed all *-primary classes to be red.

How about creating our own button classes. Would it not be easier to use class btn-happy for a yellow button instead of trying to remember if the primary or secondary is yellow.

In _variables.scss add the following lines after $dark (at line 75).

$health: $green;
$prof: $blue;

$happy: $yellow;

In theme-colors in the section below add

 "health": $health,

    "prof": $prof,

    "happy": $happy

So that theme-colors looks like

$theme-colors: () !default;
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark,
    "health": $health,
    "prof": $prof,
    "happy": $happy
  ),
  $theme-colors
);

Save the changes and compile Scss to css again

When I refresh the web page I can see my custom colored buttons, using my own class names.

No alt text provided for this image

I now have buttons with my custom colors. In fact all the Bootstrap components that use the color pallet are now customized. To show this I can display an alert

    <div class="alert alert-happy mt-5" role="alert">

            A simple Happy alert—check it out!

        </div>

When we refresh the page:

No alt text provided for this image

Note also how the compilation process did the same color modulation of yellow to fit the color to suit the other alert colors.

Personally, I like the Bootstrap color theme. But being able to modify it to suit my own requirements makes it a lot easier to customize and use wherever I need it. For the website I am designing I don’t have Primary and Secondary colors. I have three primary colors called Health, Prof and Happy.