DEV Community: Kristbjörg Ósk

How you explain the basics of internet to a 5y old

Kristbjörg Ósk — Wed, 25 Nov 2020 14:14:25 +0000

You are at home about to visit a website in your computer, what goes on behind the scene so the browser will display the website for your is like this:

Browser - dns server - data center - optical fiber cables - router - browser.

Let's break it down. The dns server is a server that keeps all the domain names and ip addresses together, when you enter an ip address the browser needs to know what ip address in behind the domain name, signal is sent to the dns server from your browser and the dns server finds the matching ip address and forwards it to the data center. Dns server is like a phonebook, it keeps each domain and their ip address together.

The data center sends back the data you need via optical fiber cable, it travels in a light pulse and may need to travel even under sea to get to you.
There are about 8 millions data centers all around the world but you may want to access data from different data centers depending on what you are browsing, so it is pretty obvious that the data needs to travel a long way so you can display the data in your browser.

The optical fiber cable is connected to the router in your home and from the router it finally reaches your browser and you can display the data / website.

If you are browsing the internet in your mobile a signal containing the data will be sent from the data server to a cell tower and from the tower to your mobile.

When you are sending for example an email or photo to your friend, the data is broken into pieces, the pieces are called packages. When all the packages have reached their destination they are reassembled so your friend can view it. This is done with TCP or Transmission Control Protocol, it makes sure to break the data in small bits so it can be sent and makes sure that the packages are reassembled correctly, so it does not allow the packages to arrive in different order. Because of TCP you can be sure that an email you have sent will arrive to your friend just the same as you wrote it and the words have not been mixed up.

When browsing the internet you may have noticed that some links start with http but others with https. The “s” stands for security, it will protect your data so hackers can not easily access your personal information. This is important for example when you are shopping online and writing your card detail or when you are in your online bank.

Traditional Web Hosting is when you buy a space on a server that you share with others websites/applications. You will pay for a set amount of space and if your website is getting more traffic then before you need to buy additional space on the server (the server is located in one of the data centers we talked about above).
Cloud Computing is new technology and is more flexible, you pay for as much space on a server as you need to host your website, if the traffic increases you will automatically get more space to handle the traffic and if the traffic goes down your space decreases.

Static website is a website that is built with only html and css, it has no interaction other then hyperlinks and forms and is simple to build while a dynamic website is more complex and built with for example, javascript and php to interact with the user depending on what action the user picks.

Bit of an overview of Functional Programming

Kristbjörg Ósk — Tue, 24 Nov 2020 17:15:09 +0000

Functional programming (FP) is a way of writing code in a more organized way, the code will be easier to read, prove and test.

FP is all about functions, pure functions but sometimes it is inevitable to write impure functions

Pure functions

Same input, same output
Have no side effect

Impure functions

Data is changed inside the function
The function needs to interact with data outside the function
You modify an object or reassign a variable.

The fundamentals of functional programming are recursion and composition.

Recursion - when a function calls itself
Composition - when functions are chained together or when function execution is passed into a function.

Composition is how we generate a higher order function - high order functions are a bit different in FP than you might be used to.

High order functions or methods are functions that accept functions as arguments or return functions.
You are most likely familiar with loop() but in FP you shouldn't use that but instead use map(), reduce() and filter() for example.
The reason for this is because when using loop() you are recreating a new array each time and that will first of all make you have an unnecessary amount of data & you are going against the “rules” of FP by changing the data.

Instead you want to copy the array and add data to the copy not to the original array

This can be done with map() or reduce().
Map() method is for when you want to get all of the values from the array and reduce() is for when you want to get one value from the array.
The same goes for objects, when creating a new object you should use object.assign().
Like you are probably familiar to push(), pop() and splice() methods to add, take out or change an object. In functional programming you should use concat() to add and array.filter() to take out an object or change it.
It is the same reason as goes for the array, you don't want to change the original data, instead you want to make a copy and amend the copy.

You should know that it is impossible to have only 100% pure functions in your code, especially if you are doing a big or complex project, then you most likely want to interact with data outside the function for example. And that is totally okay, it will only make coding more difficult than it is if you put yourself in a box and try to code only pure functions, let’s remember the functionality of the code needs to work. It is a good rule to have 80% of your code in pure functions and the rest can be impure functions. If most of the code is pure it will make it way easier to maintain, change and debug and you won't have to worry about breaking the code somewhere else as the purse function will not affect any other functions in your code.

This is only the tip of the iceberg and you can dive way deeper in functional programming but this should give you a bit of an overview of the idea behind it.

What to keep in mind when choosing font style and size..

Kristbjörg Ósk — Mon, 28 Sep 2020 15:11:14 +0000

Why are fonts so important?

When you visit a new website the first thing you do is read the content before clicking on anything. If the text is hard to read, with complicated font style (handwritten / romantic), not enough space between lines plus the font size is too small, then you don't even bother browsing that site. I mean why would you if you can barely read the content.

First of all, the font style.

Some people recommend using max 2-3 font styles and other recommend up to 4.

When it comes down to it, it all depends on what kind of website you are designing and how large is it.
If it is a very large website you might get away with using 4 font style but if the site is rather small then less is more.

The idea behind using 4 font style is this,

* one for the headline, 
* one for the subtitle, 
* one for the body 
* and at last one for quotes.

Using the same font for the whole website is perfectly fine and often even better. The website will look more professional, trustworthy and consistent.
If there are too many font style used it might end up looking unprofessional, messy and confuse the reader. If you need some ideas on what fonts to pair together this website could be great help.

If you end up choosing one font style, it doesn't mean the website will look flat as some fonts have large font families. If you choose one of the font with large families you have all kinds of font weight in regular, italic, bold etc to choose from.
When designing a large website, it is often recommended using fonts with large font family to be consistent, specially in the long run, here you can see fonts that have large font families (variable fonts).

When choosing the right font style for the website you are designing, keep in mind who the site is for, who are the customers and what is the company‘s brand about.
You might find a cool handwritten font and it could be tempting to use it but be careful. Be sure the font you choose is readable, most people find it hard and even annoying to read text with different kinds of writing style then they are used to and don't bother reading it.
The picture here below shows a good example of what different font style are appropriate for different companies.

Have in mind, what is the purpose of the website, what do you want the customer to feel like when they land on the page?

picture from The Daily Egg

When it comes to the font size

keep in mind there are all kinds of people that visits the website and some of them have bad vision.

It is very important to choose the right font size both for mobile and desktop, here below you can see the recommended font size for h1 and body for different kind of devices.

(charts made by me)

As well you need to think about the line height, so the text is not all cramped together. If the line height is right the text is easier to read and it is better skimming it. Many people today don't bother or don't have time to read the text word by word and instead skims quickly through it to find the information they are looking for.