DEV Community: Oluwaseyi Idowu

System Design: The Art of Balancing Trade-Offs

Oluwaseyi Idowu — Sat, 04 Jan 2025 15:33:54 +0000

Few days ago, I took a deep dive into system design—a discipline that has since reshaped how I think about building scalable, efficient, and resilient systems.
At its core, system design involves envisioning the complete lifecycle of a system, identifying potential bottlenecks, and planning for scalability from the outset. Whether you're transitioning from a static application to a dynamic one, or building a system to handle millions—or even billions—of users, the ability to anticipate and design for future challenges is crucial. This is where system design comes in, helping us put things into perspective and make informed decisions that ensure the system evolves seamlessly as demands grow.

Why System Design Matters

System design isn't just about the architecture or technology stack—it's about making deliberate choices that align with the system's functionality, stage of growth, and optimization needs. It helps answer pivotal questions such as:
• When should we introduce a web server or load balancer?
• At what point do we scale our database vertically or horizontally, and should we consider replicas or a master-slave configuration?
• Do we need caching mechanisms for faster data access?
• Should we leverage a CDN for content delivery or shared storage for stateful and stateless architecture?
• How do we implement data centers, message queues, sharding, logging, metrics, and automation to ensure scalability and resilience?
Each of these decisions requires a solid understanding of the system's requirements and potential trade-offs. A poorly designed system can lead to bottlenecks, inefficiencies, and even complete failure at scale.

The Role of Back-of-the-Envelope Estimation

As developers and team members, understanding the trade-offs involved in building profitable, scalable systems is a core responsibility. This is why many organizations encourage back-of-the-envelope estimations—a practice of estimating a system's capacity or performance based on given requirements.
As Jeff Dean, a Senior Fellow at Google, once explained,

"Back-of-the-envelope calculations are estimates you create using a combination of thought experiments and common performance numbers to get a good feel for which designs will meet your requirements."

This practice is essential for making educated guesses about factors like:
• Query per second (QPS) capacity
• Storage requirements
• Latency expectations
It requires a strong sense of scalability, optimization, and practical understanding of trade-offs

Trade-Offs: The Heart of System Design

Every system design decision involves trade-offs. A well-designed system balances factors like security, availability, scalability, consistency, latency, and more. Understanding these trade-offs is what makes system design both challenging and fascinating.
One simplified example of these trade-offs is the CAP theorem, which states that it is impossible for a distributed system to simultaneously guarantee more than two of the following three properties:
• Consistency (every read receives the most recent write)
• Availability (every request receives a response, even if it’s not the latest)
• Partition tolerance (the system continues to operate despite network partitions).
This theorem forms the basis of many system design decisions. For instance, in high-scale systems like those for e-commerce or social media, one might prioritize availability and partition tolerance over strict consistency to ensure a seamless user experience.

Building for the Future

System design isn’t just a skill for programmers—it’s a shared responsibility for everyone involved in creating scalable, secure, and user-friendly solutions. From engineers to product managers, understanding system design equips teams to make better decisions and create systems that stand the test of time.
A well-designed system reflects a thoughtful balance of trade-offs, driven by the business’s goals and the system's users. It anticipates the challenges of scaling and provides solutions that not only meet immediate needs but also future-proof the system.

Let’s Talk System Design

For me, the journey into system design has been an eye-opening experience, teaching me the importance of balancing competing priorities in building solutions that work for both users and businesses.
What about you? Which trade-offs or bottlenecks fascinate you most in system design? Are there particular concepts you find intriguing or challenging? I’d love to hear your thoughts—let’s discuss in the comments!

UNDERSTANDING API LIKE A PRO

Oluwaseyi Idowu — Sat, 26 Aug 2023 22:20:19 +0000

APPLICATION PROGRAMMING INTERFACES - (API)

BACKGROUND INFORMATION ABOUT API

In your small dev journey, it is almost impossible you wouldn't have come across this term somewhere somehow. It crops up so often. So, what are API and what can we do with it. In this article, we would be interacting with some API, and we would use one of them to understand API like in details.

APIs are very useful. For example, Email collector API is very useful if you're building a landing page or a newsletter, preorder, etc. Before this we must understand what are API and what are they useful for.

If you go to yahoo.com, on this page you would notice a section that display the weather parameters of your current location.

If we want to create our own website and we want a module like this, how do we go about this? Notice we wouldn't be able to set up a weather station, take measurement and then integrate this on our site. The problem is that we can't even set up a weather station in all locations of the world.

So where do we get the weather from anyway? We will use weather system interface like weather API.
(https://openweathermap.org/api)
Weather API have collected all these pieces of weather data, do the forecast and all complex stuff, so all we have to do is to use their API to tap into that weather data just like yahoo do it on their page. In the same way too, when you go to tinder [https://tinder.com/] and you see their share friends and shared interest section. Where are these data coming from, its coming from Facebook using the Facebook API. They use those data to populate that section of their site.

Over the internet, we have tones of API that we can use for anything we want to do. In the UK we have police API, that provide data on crimes and other data and people have used it to build interesting stuff. One of this is murdermap. This platform uses the police API to map out murder crimes and classify these crimes based on different metrics especially for London using the data supplied by the API. Someone can use this information to decide where to live and where to avoid.

There are API's that provide prices, and several other stuffs and you can use this data to build anything you want.

WHAT IS API – APPLICATION PROGRAMMING INTERFACES - DEFINED

According to general accepted definition, an API is a set of commands, functions, protocols, and objects that programmers can use to create software or interact with an external system.

What Does This Means?

Let say you go to a restaurant; they will surely have their menu accessible to you but at the same time you can go into the kitchen where we have the ingredients and recipe and probably some surprised chefs. If you go into the kitchen and start eating this raw recipe and ingredients, certainly the restaurant authorities won’t be happy about it. This means that, though there were things they sell that they will allow you to buy but there are other things that are off limit. The same way for websites that takes and have their own data, be it Facebook which has data on users or police API which has data on crimes. There are data they would allow you to access but there are others that they would never want you to see. It is none of your business. So how do these websites tell you what data you can access and how you can access them. If we take the case of a restaurant, they will do it i.e tell you what is available in a menu. The content in the menu may be cakes, cookies, coffee, etc. This is the same for websites. Like OpenWeatherMap, we can have temperature, weather condition, weather image/icon, pressure etc. An API, some people consider to be a contract between a data provider and a developer which says these are data that a data provider provides, the one a developer can use and the ways, protocols and how to use those data and that the website that host this data would not change any of this agreement without a proper notification.

Our definition of an API can now make sense, a set of data programmers/developers can use to create or interact with an external system.

We have seen the ones that allows you to interact with an external system, but we haven't seen any that allow you to create a software. Or have we?

Yes, we have, remember jQuery? (If you want to understand and use jQuery like a pro, kindly contact us or reach out in a mail). It is a tool that gives you access to object and methods that allows you create software easily other than writing vanilla JavaScript to manipulate the DOM.

Let’s take a look at Tindall, on Tindall, Facebook API is used to interact with an external system when you're on their website.

In this article we are going to focus on API that allows you to interact with an external system most importantly an external server. We are going to access some data from some website and we will do that through their API. We will read their documentation to see what we can do with them. We will make requests to their server and get responses all through their API. Their documentation will serve as a menu/guide for what we can do with their data.

API ENDPOINTS, PATHS AND PARAMETERS

In the last few words, we have learnt about API all in the theory. In this section we will be going practical. We will access and use APIs from some website.

When you think about an API you need to be thinking about things like Endpoints, Paths, Parameters and Authentication. These are the four things we will cover and we will see what each of this do.

API ENDPOINTS

Every API that interacts with an external system will surely have endpoints.

Let's quickly look at kanyewest API at kanye.rest for random Kanye West quotes. This data is hosted on kanye west database and one of its endpoints is
GET [https://api.kanye.rest]

Whenever you are using a different API, they would probably have their own endpoints and the details of this will be included in their documentation. Most of the time each use case or functionalities of an API will have an endpoint. If we copy the link above – (endpoint) and paste it in our browser our browser will make a request to the kanye.rest server and that server will send back a response which is a quote by Kanye West.

Let's say we create a website and every day you come to the website; you get a Kanye quote. We can probably do that using this API.

Note: To have the look above, you need to install JSON viewer Pro chrome extension and use it. It helps to view server responses in a more human friendly format. It also has other great options and benefits like finding a specific path and copying of paths. It also has other great functionalities that you might want to try out.

It is important to say that most websites that have API has more data than just a random quote.

In addition to an endpoint, there is also API paths and parameters.

API PATHS AND PARAMETERS

These are things that you can use to narrow down on a specific piece of data from an external server. To illustrate this, we will use an API from a joke website.

[https://sv443.net/jokeapi/v2/]

or [https://v2.jokeapi.dev/]

Through the use of paths and parameters we can narrow down on the kind of jokes we want from this website or server.

Use any of the links above to get to the jokeAPI platform.

This joke API is more complex than the Kanye West one because it has more option for you as the programmer. You can select the kind of joke you want based on category, flags to blacklist, response format, joke type, included string and others. See it below.

The first thing we need to do to use this API is to get the starting point which is the endpoint. If you go to the link above and you scroll down, you will see a bunch of endpoints. You will see one that says GET joke.

If we just copy the URL above and paste it in our browser, you will see that you get an error that says - no matching joke found, no category selected.

So, what is going on here? Although we have the endpoint but there is something missing which is the category. If we use the try it out section,

you will see we have a category call any and it is set to category ‘any’ and if you select programming it changes the URL at the bottom to /programming at the end.

So, the difference here is that we need to select a specific path after the endpoint. If the endpoint is the main tree, the path is the branch.

Here we have seen a path specified here. The endpoint is the main API link and the category is the path e.g programming or dark or any or other ones provided by this jokeAPI.

Remember when we are working with express and building up a server, when we are creating a new path/route we need to plan for it so that when a request is made to our server, we need to be able to catch and filter through to get the specific parameter we want and want to use.

Sometimes we might want to get a piece of data that is specific say a programming joke that contains the word debugging but the API developer won’t probably have thought of this beforehand so in order to allow the API to respond to things like this, we use what we called parameters. These parameters can be attached to the end of the URL after a question mark. It is sometimes a key value pair e.g., /?contain=debugging. The key might contain a string and the query is the debugging which is the value.

It is what is tried out. Other things are added to the link as we select some options in this section. The more we change the default selections, the more the parameters that are added to the link. Now notice if we have more than one query, the first query follows after the question mark, and the subsequent queries follows after the & symbol.

When you want to specify a parameter, remember that you need these symbols to use them, it comes after a question mark (?), then the key, then followed by an equal to (=) sign, then followed by a search string. Any other parameter or key value pair which is an additional query will come after the and (&) sign.

If we use this link in our browser, we will get a joke with the options we have specified.

[https://v2.jokeapi.dev/joke/Programming?blacklistFlags=sexist&type=single&contains=debugging]

Note: You can select plain text under the response format to add that parameter and your responses would be in plain text.

Now with the addition of a parameter, we are able to get something specific and a precise thing that we want.

Now, you have seen an API in action, how to use an endpoint, also how to identify and use path and parameters to narrowed down on a piece of data.

You can stop reading for now. Take some time and play with this API adding some path and parameter in your browser and making some requests and getting responses. Ensure you know what is going on when you type out those long URLs in your browser.

In the next article we will talk about authentication and what we will have in our responses.

Don’t forget to drop your comments, suggestions and any questions you might have.

CSS Selectors, Combination And Avoiding Conflicting Styling; (CSS Selector Mastery and Best practices).

Oluwaseyi Idowu — Thu, 24 Aug 2023 14:04:33 +0000

Introduction

Cascading Style Sheet (CSS) has stood out as the ultimate tool for styling a webpage. While the HTML helps in structuring and outlining our webpage, the CSS is used to colour, design and style our webpage. Let's say our webpage or website is a building, the HTML will be the block which are layered to give the shape of the building. The CSS will be the painting, styling and decoration of our building. It is also good to state where JavaScript stands in all of this. Ultimately, JavaScript is used in maintaining or giving functionality to the elements in our webpage. A simple colour combination implemented with CSS can make a lot of difference in a web page or site. Though there are many things to learn about CSS styling in this article, you will learn about CSS selectors and how to avoid conflicting styling in your web projects.

Table of Content

What are CSS selectors
i. What is CSS
ii. What are selectors
What are the uses of different CSS selectors
i. What are the different CSS selectors available
ii. What are the specific uses of CSS selectors
Examples of different CSS selectors and their uniqueness.
i. Examples of different CSS selectors
ii. What are the uniqueness of each CSS selector
Combination of different CSS selectors with examples
i. Pick & Mix Selectors
a. Multiple selectors
b. Hierarchical Selectors
c. Combined Selectors
ii. What is the difference between the one with space and one without space.
How to avoid conflicting styling in our web design
i. Understanding conflicting styling in web design
ii. What are the major causes of conflicting styling
iii. Ways and How to avoid conflict styling
iv. Principles and best practices in good CSS styling

Prerequisites

To get the most out of this guide, it is expected that you should have a basic understanding of HTML, CSS and or JavaScript. If you are not familiar with these technologies, we recommend that you take some few minutes checking them out to familiarise yourself with them before you proceed with this guide.

1. What are CSS selectors

Before we look at CSS selectors, it is important to understand CSS itself. So we will quickly look at the following to properly understand CSS and CSS selectors.

i. What is CSS:

According to the several sources including official documentation, tutorials and books, Cascading Style Sheet (CSS) can be defined as a style language used to describe the presentation and formatting of a document written in a markup language such as HyperText Markup Language (HTML) or XML. It allows developers and web designers to control the layout, design and appearance of web pages, making it easier to separate content from presentation. For example,if our web page is a building, the markup language HTML will be used for the layed blocks or structure of the building while our CSS will be used for the painting, designing and decorating of our building.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Hello World!</h1>
    </body>
    </html>

Note: You can generate the above by pressing control button + exclamation mark in vs code.

If we put the above in a filename.html file and open it with any browser, A white page with a black Hello World text is displayed.

Let say we want the colour of the text to be red, this is where CSS comes in.

We can include some style in the markup above by doing the below

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
      </head>
      <body>
        <h1 style="color: red;">Hello World!</h1>
      </body>
    </html>

Note the difference!

ii. What are selectors:

Selectors can be referred to as markers or reference names with which we can style our HTML elements. In writing a good CSS, it is always good to keep all our CSS and styling files in a separate file. This is good practice. Most of the time, software engineers or developers name this file styles.css. So instead of including our CSS styling in our HTML we will keep it in a separate file. Atimes, some put it in a separate folder entirely. Create a new file named style.css in the same folder where we have the html file. All our css styling will be written in this CSS file.

To style our h1 heading above, first we need to remove the inline styling in the h1 above, so that our style can reflect.

Now in our CSS file we can use a selector to select our h1 and then write our style. See the sample below.
In our CSS file, write or paste the styling below;

h1 {
        color: red;
      }

This changes the colour of our h1 just as we have it when we write it within the h1 tag in our html file.

This is what we call an external CSS and for it to work we have to connect it to our html file by including the below within the head of our html file.

  `<link rel="stylesheet" href="style.css">`

In the example above, h1 is a selector.

2. What are the uses of different CSS selectors

As we have seen above, selector is simply a reference with which we can use to apply styles on our HTML elements. They are used as references through which we can apply a distinct or unique styling to any HTML elements.

i. What are the different CSS selectors available:

Imagine if we only have one selector and we have multiple h1 in our HTML document. Applying a different style to each of them would have been impossible because if the browser sees a different style for a single element, the last one is retained.
Take a look;

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>My page</title>
      </head>
      <body>
        <h1>Welcome to my site</h1>
        <h3>First Selector</h3>
        <p>This is a paragraph tag. We can include many sentences within here.</p>
        <h3>Second Selector</h3>
        <p>HTML is for layout. It is for inputting and arranging our document in our webpage</p>
      </body>
    </html>

In our style.css, Let say we want to apply different bacground-color to the h3

h3 {
        background-color: black;
      }

      h3 {
        background-color: brown;
      }

The background-color that we will see for both h3 will be brown. This is because the h3 tag selects all the h3 elements in our HTML. So what is the way out?

Important point to note:
In styling application on html markup with CSS, If there are two styles on the same element or html tag, the last styling is what is applied. This is well proven by what we have above. We have two different styles on the h3 but the style further down the line of code is what is applied. This is one of the most important rules to have in mind why using CSS.

There are other CSS selectors we can use. This includes;
a. HTML tagname
b. class
c. id

ii. What are the specific uses of CSS selectors

As we know all CSS selectors can be used to apply style to our HTML elements. With the different selectors above, each HTML element or content on our webpage or a group of content on our web page can have a unique style applied to them separately or as a group.

3. Examples of different CSS selectors and their uniqueness

You might be wondering, what are the differences between all these CSS selectors? Each of these selectors although have a lot of similarities but they also have their uniqueness.

i. Examples of different CSS selectors

Take a look at this.
Lets edit our body in the HTML above to the one below:

<body>
        <section id="section1">
          <h1 class="header1 brown">Welcome to my site</h1>
          <h3 class="blue">First Selector</h3>
        <p class="brown">This is a paragraph tag. We can include many sentences within here.</p>
          <h3 class="brown">Second Selector</h3>
          <p class="blue">HTML is for layout. It is for inputting and arranging our document in our webpage</p>
        </section>
      </body>

Then in our style.css, let's include the following styles

body {
        background-color: #8f8f8f;
      }

      #section {
        font-family: sans-serif;
      }

      .header1 {
        font-size: 3.5rem;
        line-height: 1.5;
        font-weight: 900;
        color: #fff;
      }

      h3 {
        font-size: 2.5rem;
        }

      .blue {
        color: blue;
      }

      .brown {
        color: brown;
      }

You can try to predict how the page will look like. Check it below

There are many things to note about our output as displayed here. The body and h3 are HTML tag selectors. header1, blue, brown are all class selectors while section1 is an id. It is important to pay attention to how each of them are used. By carefully using our CSS selectors, we can apply multiple styles and unique styles to any HTML element.

ii. What are the uniqueness of each CSS selector:

It is important to know the uniqueness of each of these CSS selectors. The first way to establish this is by their usage in our styling. We can look at how they are used also in both our HTML and also in our CSS file.

a. Looking at the way they are used or appear in each of our files.
For HTML tag name: if we have <h2>Heading<h2> in our CSS we can say h2 {our style}. Just like we have above, body and h3 are HTML tagname used in styling. For example the ash backgound-color on our output in our browser was a style applied to the body.

For Class: we include class="classname" within the opening tag of our HTML element. Looking at the usage, we use .classname {our style} to apply a specific style to our an HTML element using the classname.Looking at our sample above, our h1, first paragraph and second h3 content has the color brown because of the style on the class brown. Look at the word brown in our HTML file and .brown in our style.css. With this we are able to apply same style to multiple elements using classes.

For id: it has almost the same implementation with class in our HTML file. The difference is that for id we use id in our html and in our css we use #idname to style it.

b. Another way to consider their uniqueness is in the priority and peculiarity of each of them. In order of priority, id is the most. It is the most prioritised in an external styling, followed by a class and then HTML tagname.

id are the most unique and has special usage case which include the following:
Unlike a class that can be used on many elements at a time, a particular id can not occur twice in an HTML file. It is the most prioritised in an external CSS styling.

4. Combination of different CSS selectors with examples:

We can also combine the selectors to pick specific HTML elements to style in our CSS.

i. Pick & Mix Selectors

a. Multiple selectors

a selector, another selector {

}

Say we have an h1 and p with colour red.

We can just have the below in our CSS file;

h1, p {
    color: red;
}

b. Hierarchical Selectors

This is selected by hierarchy. That is selection based on the hierarchy of the selectors

E.g

#title .container-fluid {
    padding-top: 3%;
    text-align: left;
}

selector1 selector2

The first selector is a parent while the 2nd is a child.
So in using this, we will go from outside in, selecting the parents till we get to the specific child.

.container-fluid h1 {
color: red;
}

Then we read the hierarchy from right to left. The one on the right is the child and the one on the left is the parent.

c. Combined Selectors

This is combining selector

selector1.selector2 {
   display: flex;
   padding: 20px;
}

selector1#selector2

We will read this from left to right.

ii. What is the difference between the one with space and one without space.

Without the separator, we are targeting an element that has the classes we state but with the space it means we are following the hierarchy moving from the parent to child.
It is good to remember this about selectors, they have hierarchy id's that are the most specific which means they take much priority and then classes and lastly HTML tags.

Also it is good to note that the last styling will always be applied.
Also class selector is superior to HTML tag while id is superior to class and HTML tag. These are CSS rules.

Then also inline CSS is the strongest when it comes to where our styling is positioned.

5. How to avoid to avoid conflicting styling in our web design

It is important to understand the ways and methods to avoid conflicting styling in our development. We can have style conflict when the style implemented by the browser is different from the one specified by the designer or the developer. This can be very frustrating at times.

i. Understanding conflicting styling in web design

Conflicting styling is when the style on our page output by the browser is different from the one specified in our code. If you observe this, you can inspect the page by right clicking on the browser, then select inspect. Chrome is a good tool to see what style is applied on what element on the page.

ii. What are the major causes of conflicting styling

Conflicting styling can occur from any of the following;
a. Having multiple forms of styling. e.g having inline, internal and external or any two together.
b. Having multiple style sources. This can cause style conflict that is not properly addressed or monitored.
c. Omitting separators and proper formatting of styles.
d. Improper linking of style files in HTML files.

iii. Ways and How to avoid conflict styling

Ways to avoid conflict styling is to ensure to carefully attend to everything stated above and sticking to best practices in CSS styling.

iv. Principles and best practices in good CSS styling

a. Use id's very sparingly. Not only that you have one of those things but that it is distinct so use class instead. Only use id when you need to but always consider using class first.
b. When you want to use a class, always use one class. Try to apply to only one class as much as possible.
c. Avoid inline styling as much as possible. It is a very bad practice so don't do it.

Keeping to all the above helps you reduce debugging to the barest minimum.

Conclusion

Now that you have properly mastered CSS selectors and best practices for great styling, make further effort to refactor your previous stylings, practise what you have learnt and work on more web design projects using HTML, CSS and JavaScript.