fretzine - Tumblr blog

[fretzine]

Data Structures and Algorithms

It has been a few months since I completed the second year of my Software Development degree with Open University and I have had the chance to relax, hang with friends and family and not think about coursework for a while.

That being said, in work we are full swing into a full website re-development project which will see us move our CMS into the cloud and re-build the front end using React and Tailwind. This has required a significant amount of time spent ensuring my Javascript is solid and beginning to learn React via online courses. Very much out of the fire and into the pan.

As I look forward to the year ahead I have two modules to focus on: 1. Data Structures and Algorithms 2. Web Technology and Architectures

In preparation for the DSA module (which I know is going to be pretty tough, judging by comments from past students) I have started to read this fantastic book:

I wanted to read this book prior to starting the module as the module can at times be heavy in the mathematics of Algorithms (and maths is not my strong point). If this book allows me to understand the higher level data structures and complexity issues then I can put more effort into understanding the math behind each one.

I'm hoping this will pay off, so far I breezed through the book and have implemented my own recursive binary search, stack, queue and bubble sort.

The images above show my use of recursion when writing new functions, I have started to practice top down thinking which requires imagining that the function itself has already been created, find the base case and sum the result of the first iteration to the function (which in turn recursively calls itself).

I've also been following Primeagen's free Frontend Masters course below: https://frontendmasters.com/courses/algorithms/

I'm hoping that the module will go well, I will try and update you with some further interesting reading and learning.

[fretzine]

Uncle Bob, Alan Turing and Razors.

It's been some time since I've updated the blog with my software development news. It's been a busy two months filled with Java exams, web building, work project deliverables and milestones and a sense of impending doom at the THREE 4 hour exams that I have to sit this week.

That being said, I still like to take the time to discuss some of the interesting things that I've been reading and watching lately. So in this article I will quickly discuss and link to videos across the interwebs that share some very cool ideas that I have encountered during my studies and work.

Uncle Bob's Clean Code

If you haven't heard of Uncle Bob then you need to watch his videos on Clean Code that can be found for free on YouTube. Robert Martin is a highly influential software programmer who was one of the original authors of the Agile manifesto (when it was designed for programmers before the project managers took over). He is known for promoting many different software programming principles, including the well known SOLID principle.

His lectures are fun but more importantly very important to learn.

The Halting Problem

With the development of such powerful computers you'd imagine that the pool of tasks that couldn't be completed by a program would either be small or shrinking. Well, it turns out that it has stayed relatively the same size (at least for the last 20 years). There are some algorithms, some procedures and predicates that cannot be solved by any computer, even supercomputers. One of the many problems that cannot be solved was proven so by Alan Turning. It is called the Halting Problem and it's quite interesting. The video below is a very brief introduction but sums it up nicely and skips all of the logic for those who just want the high level summary.

Razor Pages ( .Net)

I have been working as a web developer for 6 months now and during this time I've been so busy catching up with the current major project which requires very little code that we have yet to delve into any real web design. I've been dealing with small amounts of javascript here and there and designed the odd banner or two in CSS but I have mainly been working on service design and continual service improvement.

This month will see me start diving into the world of .Net from Microsoft. I've been beginning my scouring of their documentation and support sites (Microsoft actually provides good documentation that explains key concepts with very little fuss.) Below is a playlist of introductory lessons from Microsoft and a great starting place for anyone who wants to get into ASP.NET or .NET web developing.

I'm hoping that someone somwhere is interested in any of these videos, if you are let me know on twitter @alexheywood and I will get in touch and we can share resources!

Desperately trying to remind myself that its summer outside and that I should not spend all of my time coding / watching videos on coding.

Speak soon!

[fretzine]

Requirements: Engineering (the software contract)

'Requirements engineering is the branch of software engineering concerned with the real-world goals for, functions of, and constraints on software systems. It is also concerned with the relationship of these factors to precise specifications of software behaviour, and to their evolution over time and across software families.' - (Zave, 1997)

When building a software system it is necessary to define the real world goals that motivate the development of the system. It is important to precisely analyse the system requirements and to validate that those requirements do what customers want, to define what the designers have to build, and to verify that the designers have done it in a correct way. It is also important to note that requirements can change over time and most often develop iteratively throughout the building process.

The important of collecting the requirements, functions and constraints of a proposed system cannot be overstated. It is considered the most important stage of the development process. There has been many examples over the years of projects that have catastrophically failed due to a lack of planning, one example is the London Ambulance Service's 1992 Dispatch System Failure which cost the lives of 42 people.

In the example above there were a number of project killing issues that could have been prevented if the requirements, functions and constraints had been properly examined. Here is a small list of some of the issues that caused the system to fail:

A company was used that did not have experience in large, real-time, safety-critical command and control systems.

The results of an audit were not considered in the selection process of the companies to develop the project.

Requirements were specified by a team of people who did not have a good understanding of the application field.

Requirements were very detailed, focusing on ‘how’ the system should work instead of on ‘what’ the system should do.

Some other important tasks during software development were not executed, such as quality assurance, configuration management, tracking of agreed changes and written evidence of test plans.

Identifying and Defining Problems

It is vital that when developing a software system that the problem it hopes to solve is identified and defined. This can be a challenging but van Lamsweerde (2009) has developed a framework which makes this task easier. It asks that we consider the three dimensions of requirements: why, what and who?

Why?

The why is concerned with the objectives of the software system. In this dimension we precisely define objectives, the consequences of not achieving these objectives and describing the interactions between objectives in the system.

What?

The what is concerned with the functional services (functions) the system provides to the user in order to achieve the objectives stated above. The functional services rely on the 'operations' of the system. They need to meet the constraints of performance, security, usability, interoperability and costs.

Who?

The who dimension is concerned with the assignment of responsibilities to achieve the objectives, functionality and constraints among the components of the system. These include humans, devices and software.

Requirements

Requirements of a system are attributes that satisfy the physical (type of machine, operating system, etc) or functional needs (user details to be recorded, encryption over network etc). Requirements usually describe the characteristics of a system, the properties of a system and the tasks they will execute, the action taken to carry out its tasks and any limitations to the system.

There are several characteristics associated with a set of requirements:

Correct – a requirement should conform to the understanding of the person who defined the requirement.

Necessary – a requirement should have a purpose.

Traceable – a requirement should be associated with its origins.

Non-ambiguous – a requirement should be clear and have a unique interpretation.

Feasible – a requirement should be possible to be developed in the system.

Consistent – requirements of a system should not contradict each other.

Complete – a requirement should represent a behaviour and output for all possible inputs in all states under all constraints.

Testable – a requirement should be able to be checked when implemented in a system.

The identification of a set of requirements is a difficult process and usually requires multiple iterations of the process in order to find all the requirements. Requirements are normally classified as one of two main types: functional requirements or non-functional requirements. 

Functional Requirements

Functional requirements are concerned with the activities and tasks the system must carry out (the what of the system).

Non-Functional Requirements

The non-functional requirements are concerned with how the system achieves its tasks or the ways in which the system should be developed. There are different types of non-functional requirements, we can further categorise them into three groups:

Quality Requirements

These requirements are concerned with the quality properties that the system must have. Some quality properties that a system must have are below:

Safety, Security, Integrity, Availability, Reliability, Accuracy, Performance, Interface.

Compliance Requirements

There are also quality requirements that must adhere to laws, regulations, social norms, cultural and political aspects and standards.

Development Requirements

These requirements describe the way in which the system must be built. It could describe the requirements of the cost, delivery timescales, maintainability, reusability and portability.

Stakeholders

There are several groups of people involved in the development process and use of a system. A stakeholder is a term to describe a person or group of people who are directly or indirectly affected by the system to be built. Stakeholders may influence the way the system is developed or who has responsibility for the acceptance of the system.

Some list of stakeholders are below:

users of the system

the person or people who are paying for the system

people buying the software after release

familiar with the problem domain (area experts)

market researchers who conduct surveys to determine trends and needs

lawyers and auditors who are familiar with the legal and government requirements

the people involved in the development of the system (analysists, developers, testers, technical experts, engineers, designers)

Sometimes a stakeholder can fill all of the roles above or they can be distributed amongst a variety of different groups internal and external.

Requirements Document

The purpose of identifying and defining the requirements of a system is so that we can create a 'requirements document' which acts as a contract between the contractor and the developers. It describes the requirements of the system in an unambiguous and clear way so that the client and developers are clear on the needs, functions and limitations of the system prior to building.

There are two different types of requirements definition documents:

Requirements definition document

Requirement specification document

The specification document is aimted at a technical audience such as the designers, developers, testers and project managers whereas the definition document is aimed at the clients, customers and users of the system.

The definition document provides the basis for the system before you proceed to the build. It also serves as a legal contract between the client and the developer, it should clearly define what the client has agreeed and what the developer is to produce.

They are usually written in natural, non-technical language to avoid confusion.

The requirements definition document should include the basics:

a brief description of the part of the business within which the new software system will operate – the system domain

a description of the functional requirements that the system must meet (in the form of a series of use cases)

a description of the acceptance tests that will be performed to assure the client that all the agreed behaviour is provided by the completed system

a description of the constraints in the system, when such constraints exist.

System Domain?

The system domain is a brief description of the real world context that the system will find itself operating in. It should only contain information that is within the scope of the system and it usually does not contain a lot of detail about the system behaviour.

Use Cases

The developer has to analyse the information gathered about the requirements of the system and define a set of functional requirements. The set of requirements often define what the system does and are usually presented in real life case scenarios which describe the systems functions and goals.

Acceptance Tests

Acceptance testing is an activity that aims to demonstrate to the client that the system works as specified in the requirements document. If the system fails any of the acceptance tests it has failed to meet these requirements and the clients may not accept the software until further work is completed.

Constraints

Constraints are defined as limitations of the new system that is being developed that must be met. Some examples of constraints are:

GUI (Graphical User Interface) must stay the same as the old version

You can only use a certain development software or language

The system must perform to a specific speed and reliability

It must be able to handle multiple concurrent users

Constraints can also occur due to external circumstances, for example laws and societal norms or regulations. You may be required to develop a system that adheres to data protection regulations, the security of data transferred over a network or accessibility concerns for the disabled.

The life cycle of requirements engineering

There are a number of phases that you will go through in the lifecycle of requirement engineering.

The first is "Domain Understanding". In this phase you are required to acquire knowledge of the context of the system (the real world scenario it will live in) and interact with stakeholders to develop a report that identifies the organisation, the domain, any identified problems and ways of addressing those problems. This will then be used in developing the requirements definition document.

The next phase is "Requirements elicitation" which is executed alongside the domain understanding activity. This activity is concerned with the identification and recording of the requirements of the system through data gathering excersises, questionnaires, surveys, teamwork based focus groups, prototyping, model-driven techniques.

The next stage is "Requirements evaluation and negotiation". In this activity, identified requirements are analysed in terms of conflicts, risks, alternative options, priorities, completeness and ambiguity. It may be necessary to hold negotiations with the clients and come to a consensus which results in sections of the requirements definition document.

In the next stage "Requirements specification and documentation" we develop the requirements definition document in the form of a template using a variety of inputs such as general objectives, system requirements, software requirements, environmental assumptions etc.

The final stage is "Quality Assurance". In this stage we check that the system is meeting the requirements as set out in the requirements definition document and if they comply with any necessary laws and regulations. It is at this stage that the developers will check that the right product is being built (validation) and that the product is being built correctly (verification). It is the hope that by the end of this stage you will have produced a product has detected all errors and all the problems are fixed.

[fretzine]

API Development

This week I have been developing my knowledge of using APIs within my web app using the javascript Fetch API. In the small app below I have used the dictionary API (which is free, link below):

Free Dictionary API

This very basic API returns a JSON with a meaning of the world and audio snippet of how to pronounce the word. I followed along to a very good tutorial on YouTube to help build this app which is here:

(43) JavaScript Project in 5 min - English Dictionary Project #HTML, #CSS and #JavaScript - YouTube

You can see the finished product below:

As you can see this is a very good example of working with a very basic API. It basically returns a JSON object which we then turn into an iterable JS object with the .json() method. You can see a snippet of the script below:

Once we have generated an object we can point to the data within its arrays and assign it to the innerText or 'src' (audio) of the website's elements.

Some further learning required to understand exactly how this works is:

Promises

Async functions

Await

Although this is basic I plan to go to Rapid API and look through the various free APIs available and build a bigger application that requires API keys, options which are included within the API calls header.

More to follow.

[fretzine]

Website re-design

I recently came across this lightweight CSS framework that uses semantic HTML (so it's more accessible) and it is .classless (although not really as you do need to create custom stylesheets yourself). But I really enjoyed that it had dark theme enabled from the get go so I didn't have to create my own and you can switch between them at the click of a button!

I have now re-designed the website using this framework to build almost 98% of the website, the only part of the website that is strictly copied from the old is the slideshow as I believed it still looked good, was responsive on mobile devices and (tbh) I struggled to get the boostrap framework to run with Pico at the same time.

Here's what the website looks like now:

As you can see the framework has created a very cool looking website with minimal coding, it's a great tool when trying to build very quick projects that can be shown to customers in the moment (or at least very soon).

I am also still developing my bootstrap skills, this week I have been building a Task Management web app in bootstrap that I will then combine with PHP and MariaDB to create an app that will allow me to add and delete tasks and have them show me their percentage of completion.

The website is not finished but currently looks like this:

It's a bit plain, but I love that bootstrap allows so much creation in so little time. This took three to four hours for me to build (which is quite fast, for me).

I'm hoping that in the next 6 months I'll move away from Bootstrap and on to Tailwind CSS as it looks much more flexible and gets rid of that typical 'bootstrap look' everyone goes on about.

[fretzine]

Introduction to JSON

In the following weeks I will be learning the basics of Javascript, PHP. MySQL and JSON. I will also be looking at creating APIs in work in order for our website to communicate with other systems using JSON.

Therefore, as an introductory challenge I decided to create a small web app that pulls data from a JSON file and populates the data into a table using Javascript.

Below you can see the project that I worked on this evening:

I am happy that I have developed a basic understanding of JSON although I can see improvements that I could have made in this script.

Firstly, I did not parse the JSON into javascript which meant that I could not interact with the code recursively which would have allowed me to create objects for each user with their respective fields.

This would have then allowed me to format the "skills" array into a more presentable format with spaces instead of commas - although I could have done it with replace() dealing with JS objects allows for more control overall.

I hope to work on this over the next couple of months as we are beginning to prepare for a large project where a whole website will be re-designed using a new CMS and many APIs will need to be re-created.

[fretzine]

Java #1

I am beginning to learn Java as part of my university course, I have been asked to read my module's textbook 'Objects First with Java'. This textbook walks you through various BlueJ activities which place an emphasis on learning objects first through iterative learning (small and often).

I have found the basic concepts of Object Orientated Programming (OOP) to be quite easy to understand and you can see the benefits of writing programs in this way straight from the go.

Java OOP

Class - a Class is a container for a variety of similar objects. A class creates objects with pre-determined fields (attributes) and methods (operations). In the image below you can see that there is a public class called Vehicle.

Fields - Fields are specific data types which hold values or attributes of the objects that the class will construct. For example, in the image below you can see that there are three fields: doors, speed and color. These fields have the data types int and String.

3. Objects - Classes can use constructors to create objects with the various attributes and methods that are pre-written in the class. For example, in the image below the class is creating two student objects called s1 and s2:

You can see in the image above that the class is creating a string s1 of type Student and assigning its value to that of a new Student.

After the creation of an object we can determine how we interact with the object by looking at its method's signatures. The signature is right at the top of the method code and tells us if it is private or global, if it has a return type of data (int, String), the name of its method and any parameters that it might accept.

[fretzine]

Personal Development Plan

My new employer has asked that I provide a learning plan for the next two years that I believe I will either study in University, teach myself or learn in work. I provide an overview of my first two years in University which can be seen below:

Over the next year I believe that I will slowly teach myself frameworks such as:

Bootstrap

React.js

Tailwind

I believe that React will be the most important for me to learn as I have a pretty good grasp of CSS and Boostrap (which is what we use in my employment).

It might be more beneficial for me to focus on Agile development techniques as during my day I have at least 3 meetings with various teams in our development team. Some are responsible for process mapping, others for process developing and others for future projects.

[fretzine]

I started my new job as a web developer for my local council this week. My first major project is to move an old website the council built within an old, out of date CMS to a static bootstrap template that I have been tasked with making.

I have never used Bootstrap before therefore I am busy going through guides and its documentation to figure out how it works. I've got to say, I can see why so many people use it - it's brilliant! This is a website that I whipped up today using the documentation and example snippets, with a bit of React.js this could be a lovely little website.

I have no specific time limit to complete this website, I hope that over the next two weeks I develop even greater Bootstrap skills and I can start putting them to use at work.

[fretzine]

Portfolio Website

Over the past two weeks I have been slowly building my first portfolio website to showcase some of my projects that I have and will work on in the future. I wanted the website to feature skills that I have developed over the last two weeks since I have completed a HTML, CSS and Javascript course in full.

You can view the website below (or click here):

Although this is relatively simple code I believe that we shouldn't have to rely on frameworks such as Bootcamp and React in order to produce simple, accessible and responsive websites. I decided to design this website as a single page - each link takes you to a different section of the one page.

To make this one page seem bigger than what it is I decided to have each section's height equal to that of the viewport. Therefore each section will feel like its own page with a slightly different background colour and headers. This works very effectively when viewing on a mobile site:

All of the website has been made with vanilla HTML, CSS and Javascript. There are some improvements that I am still looking to make - for example, I believe the content is too large when viewed on a desktop. I also do not like the main typed text on the home screen when viewed on a mobile.

I am starting my new job as a Technical Web Developer for my local council in two weeks. One of the challenges and responsibilities of developing for the council is the requirement that our websites are as accessible as they can be for a varied public. Therefore, I have decided that I should try and build my portfolio adhering to the WCAG guidelines.

My website scored 83/100 which I am happy with.

[fretzine]

Today I have been learning about one of the main data structures in programming - the dictionary. It’s a container that holds keys which each have a value. In the script above we were tasked with creating an ‘interactive loop’ (as it uses user input) that will randomly show a word and its definition.

This has a few things that are interesting for those who may be learning:

It has used the ‘from random import *’ to be able to use the choice() function.

It has used input() to interact with the user and save the input to a variable.

It has used nested conditional loops such as While and For

[fretzine]

Javascript Project: Stopwatch

I have made a stopwatch with HTML, CSS and Javascript. This was a good example of using iteration to change the values of the HTML each second. I created an original version that looked very clunky and wasn’t very inviting therefore I re-formatted the HTML with new CSS that uses circles and lighter colours. You can try it for yourself here: 

http://www.excellent-tinted-babcat.glitch.me

[fretzine]

D&D Character Creator Tool

In the first phase of the development of my D&D Character Creator tool I have programmed the logic behind the rolling of the dice. The code does the following:

Rolls a six sided dice 4 times.

Remove the lowest of the 4 numbers.

Add the remaining three

Save this as one of the stat numbers

Repeat the same process 5 more times

This was beneficial as it helped develop my javascript skills (such as Math, let/const variables, functions etc). Over the next couple of days I will be adding the following:

Character Name, Age, Race, Ability Scores and modifiers, HP, AC, proficiency bonus. 

This should be a fun and easy project that my friends can use when we decide to have a one shot campaign on the weekends!

[fretzine]

Python - Text based RPG game - development

I have been learning how to code with Python over the past few weeks with Open University as part of our TM129 module. It has been a really fun language that is pretty simple in comparison to C# and Java. As per my usual methodology, to learn the language better I have decided to write a small text based roleplaying game. 

I am far from finished with it but I hope the video above is a good reminder (to me) and maybe inspirational to others that may be new to Python and are thinking of some interesting ideas to create.

The key features so far:

Character Name and Race

Stats

Character Level

Fight System

Ordering System

Examine System

Rent (a room, early save functionality)

[fretzine]

Networking And Communication: The Essentials

I have spent the last month going through the Cisco Network Academy learning the essentials of networking and communication technologies. I learn a lot easier when I write things down so here is my best attempt at giving you a thorough guide to networking and communication. Below is everything that I have learned so far - condensed for your ease.

Networks

The internet is a huge network of interconnected servers, hosts, routers, switches, peripherals and IoT gadgets. They are all connected via wired or wireless technologies such as Ethernet, Fibre Optic, Coaxial cable, Bluetooth, NFC, etc.

A LAN is the smallest type of networking and it usually consists of a host computer, a router and perhaps a printer or some other peripherals. These are often found in your home. A WAN is a wider network that can be accessed by many different LANs but is still not accessible to the wider network. You can think of a WAN as many LANS connected together. (Think of a University network).

Switches - these are devices that are responsible for the movement of data traffic on a local network (when the data is moving from one local host to another on the same network). 

Routers - these devices are responsible for the movement of traffic from one network to another (and this can include destinations across the internet).

Most home ISP routers will also include a default gateway server (which wraps up data packets in the IPV4 packet ready to send over the internet), a DCHP server (which is used to allocate local logical addresses for hosts on a local network) and a switch all at once.

Data Transmission

One of the most fascinating aspects of networking is how the data is transmitted across huge distances in such as a small amount of time. And it’s even more impressive when you learn that the medium over which the data travels is constantly changing throughout its journey. For example, you may send data to a server in Africa and it may travel through fibre-optic, ethernet, co-axial, satellite transmission to get to its destination. 

These various mediums of data transmission rely on a variety of different techniques to transmit this information. For example, ethernet and coaxial cabling relies on electronic impulses sent through the wiring to read and send binary data. The same can be said about fire-optic cables but instead they use light beams which also pulse quickly to create binary data.

You can use light at varying frequencies to work together at the same time without interfering with each other. For example, let’s say that we have a fibre optic cable - inside this cable there is one glass tube sending data back and forth to two computers. We could send just one flash of white light every tenth of a second or so and this would transmit data (albeit at a very slow rate) - but we have developed a technique called dense wavelength division multiplexing (DWDM) which splits the light into different frequency bands (for example, one light is blue light, the other red, the other yellow). This way, we can send three streams of data down the same tube which increases the data transmission rate by three times!

Packet Switching and Encapsulation

As previously mentioned, the internet is a network of a variety of different mediums and media which travel great distances and use a huge variety of different technologies. So how can we ensure that data gets to the right place and in one piece? We use protocols.

Protocols are a set of rules (usually set up by a authority like the IEEE) that dictate how data should be communicated across the internet. This way, even if the computer is ten years old it can still communicate with new computers because they understand the same rules of communication. Much like how humans have interpersonal ptorocols such as a hand shake, saying hi, eye contact, saying goodbye etc. 

There are a variety of protocols that make the internet work but here is a quick breakdown:

MAC / Ethernet - MAC protocol is used for the data communication between two NIC cards on the same network. For example, if you are sending information from your PC in the bedroom to a PC in your living room it is using the MAC protocol. 

IP/ TCP - The IP protocol is designed for data transmission over different networks and is mostly associated with the internet. TCP is a protocol that runs at the same time as the IP protocol - this protocols job is to ensure that data transmission has been received in order and no packets were dropped.

HTTP - HTTP is a protocol that is at the ‘Application’ layer of the protocol stack (something I will show you later). This protocol is designed to provide the client with information such as HTML and media. (basically anything you see, read or hear on a website).

Networking devices rely on a layered service architecture when transmitting data. What this means is that there are a number of layers that are co-existing that are in charge of different aspects of the transmission journey to ensure that it goes smoothly. 

Along its journey from your local computer to a destination server your data may encounter various mediums and will abide by different protocols along the way in a process known as ‘encapsulation’. Look at the image below: 

Here we have a ‘protocol stack’ diagram. The physical section of this diagram has dotted lines because although it does feature protocols (such as the ethernet protocol) it is usually hardware and we can ignore that for now. Let’s just assume that physical means hardware such as ethernet cables, NIC cards, ethernet ports etc.

The ‘link’ element of the stack would include the MAC protocol which uses ethernet to send data from one local host to another. 

So the computer will create an ethernet packet with a destination MAC address (computer 2) and a source destination address (computer 1) in its header. In the body (or payload) it will hold the actual information that is being shared. This packet is called an ethernet ‘frame’. You can see how the frame would look below: 

When we are sending information back and forth to to other computers on the internet this works just great. Usually (due to DCHP servers) the switch will have in its routing table the MAC address of most of the hosts that are directly connected. 

But if we wanted to send information to a computer that was on a different network then we would need to move up the layer architecture and use the IP/TCP procotol. So the computer will take the ethernet frame above and send it to the Gateway server (this server is responsible for encapsulation and de-encapsulation). 

When the ethernet frame gets to the gateway server the ethernet frame (above) is put into an IP container (imagine russian dolls). The IP frame now uses a IP address of the source computer as its source and the IP address of the destination IP is used as the destination. This IP packet wraps around the ethernet frame and keeps it safe as it travels across the internet.

Now as this router sends the IP packet to the destination it may not be able to do that in one “hop” (jump from one network to the next). So it looks for the next router on its journey and finds its MAC address. It takes its own MAC address and replaces the old source MAC address with its own and replaces the old source destination MAC address with the next router. The IP source and destination stay the same throughout the journey. So you can imagine that data travelling across the internet is basically from router to router and at each meeting they change the old MAC addresses to the news one required for the next hop.

Global and Local IP Addresses

There are two different types of IP address that we work with on a daily basis when using the internet. You may have noticed that the local IP address for your computer is or close to a friends computer at his house? Perhaps it looks like 192.168.0.119 or something similar to this. This is because when we are connected to a LAN network (for example, two laptops connected to your home ISP router) the two computers on this network are automatically assigned a local IP address that is the same for every router across the world. The range that is assigned for most home, small businesses is 192.168. 0.0 — 192.168. 255.255.

The ISP router that you are connected to actually has a public facing IP address that can be seen by other networks and the internet. This is what’s called a global IP address. This is what servers like google.com send data traffic to when you request a search on their website. It is the routers job to then distribute that information via MAC procotol to your computer. This process is called Network Address Translation (NAT) and is used by the router whenever it receives data from an external source.

These are some basic networking principles that are important to understand and I hope this has helped develop your understanding.

[fretzine]

Yesterday I created two different websites that generate a story of some sort using the users input as suggestions. Although both websites are different thematically the concept remains the same. I ask the users to fill in a table with a variety of different variables which are then inserted into a string of text and printed using innerText to a HTML object (in this case a <p>). I saw a user on twitter use this method to create a mad lib theater website and I thought that it was such as a good idea!

Although the javascript I have used before in previous projects (such as the stopwatch) it was really important for me to wrap my head around responsive website design and how to create a website that functions well on desktop and mobile. I have decided that as I move forward through my CSS training and develop my javascript further that I should prioritise mobile-friendly design over desktop as it is far more likely that people will view websites using their mobiles.

You can check out both of my webpages below:

Ye Olde Inn - A Dungeons and Dragons campaign introduction generator. You and your friends have just got to the Brandybuck Tavern and you receive a mysterious letter asking for help! 

https://boiling-fuchsia-haddock.glitch.me/

A Peculiar Tale - A bartender serves drinks in a dirty dive bar when all of a sudden a hooded figure in the corner has something to say. Neon filled cop film meets Twin Peaks. 

https://north-strong-laundry.glitch.me/ 

[fretzine]

HTML and CSS

I am currently a month into my ‘exploring maths’ and ‘technologies in practice’ modules which will last 24 weeks. Within these modules I will be looking at concepts such as engineering mathematics, scientific notation, trigonometry and how these are applied in three different sections of computing:

1. Robotics

2. Networking and Communications

3. Machine Learning

I am still in the process of learning HTML, CSS and Javascript. I had a fairly good understanding of HTML from a teenager so I have been using the YouTube video below to help me if I’m stuck (and as a complete overall refresher):

I have also been using the W3Schools website as this is invaluable and gives you examples of every item. The MDN Web Docs (mozilla reference guides) is amazing also you can get that here: 

https://developer.mozilla.org/en-US/docs/Web/HTML

While studying these modules I have also purchased the following Udemy course: 

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/

This course is going to help me develop a real working knowledge of HTML and CSS to the point where I am able to create static and dynamic websites that look beautiful on both desktop and mobile clients. This is in the hopes that by September I am confident enough to move onto Javascript ES6 and learn this in great detail so I can confidently tick off ‘front end development’ by the end of the year.

Learning Roadmap for 2022:

HTML and CSS

Javascript

React and other JS frameworks

That being said, I have been working on a project website (a fake Starbucks website) to test out the CSS and HTML knowledge that I am developing. I am currently looking at Flex box and Grid display in CSS which helped me make the following website: