Forem: Emor Musk

The Power Of Pseudocode In Software Engineering

Emor Musk — Wed, 24 Jan 2024 14:45:28 +0000

When faced with a bug or a difficult functionality, developers often approach it differently. Some may face it straight up, writing and deleting codes, basically trying and trying till something works out. Meanwhile, some may sit back and try to reason out how they’d debug the code, thinking of different ways to go about it in their head before they even start putting anything down in the code editor.

Although, whichever way works, sitting back and planning out how to debug a code before actually facing it head-on is a better approach because it allows for proper evaluation of the problem. Facing the code head-on without a clear approach allows for subsequent bugs and doesn’t foster good code-writing skills. On the other hand, mapping out a clear approach before tackling the problem encourages good code-writing and problem-solving skills.

Now, what is a pseudocode? Here’s the thing, a pseudocode is a detailed and readable description of what a computer program should do. Think of it as bringing down your entire thought process of how you plan on solving a problem in software engineering. It is an elaborate and systematic depiction of how you picture solving the problem in your head.

Pseudocode is independent of the programming language as it has no syntax. There are no predefined or laid down guidelines for writing a pseudocode, it could be written in any way. It represents a sketch of how you plan on approaching the problem.

Problem- Create a function that returns the sum of all the numbers in a list

#Pseudocode

create the function
create a list of numbers 
create a variable SUM
iterate through the list
upon each iteration, add each number to the SUM variable
return the SUM variable

Looking at the snippet above, the problem was to create a function that returns the sum of all the numbers in a list. I created a detailed and systematic approach to how I’d tackle the problem before even writing a line of code. As shown above, the pseudocode was written in plain English but clearly explains the algorithm behind the solution to the problem. Implementing the code after this is a walk in the park as there is a blueprint already.

Pseudocodes are very important as they provide a clear and detailed way to express the logic of an algorithm without getting overwhelmed with the syntax. Truly, certain algorithms appear daunting at first glance, but approaching them with well-written pseudocodes makes them less daunting as you get to break down the problem in your own words and how you understand them.

Furthermore, pseudocode aids collaboration among developers. It serves as a common language for discussing algorithmic solutions. When working on collaborative projects, writing good pseudocodes hastens the development process, making it easier for other developers to understand your thought process and the reasons behind some code decisions.

In the code editor, pseudocodes are often written with the aid of comments. A comment in programming is a piece of text within the source code of a program that is not executed by the computer when the program is run. The computer ignores comments when running the program as they are not executable in the source code. Therefore, comments are great for pseudocode because pseudocodes are meant to provide a detailed description of an algorithm and are not meant to be executed.

The Way Forward?

In summary, it isn't compulsory to make use of pseudocodes while writing code but the perks are endless. You are breaking the algorithm into ways you understand before actually coding. It speeds up your development process and makes your code neater and more readable. It is a coding convention you should start applying.

Specificity In CSS

Emor Musk — Thu, 18 Jan 2024 01:25:17 +0000

According to Wikipedia, cascading style sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. In other words, CSS is responsible for the styling of the webpage. CSS is one of the basic building blocks of the web alongside HTML and JavaScript.

Specificity in CSS refers to a set of rules specifying which style declarations get applied to an element when there are contradictory or overlapping styles. Think of specificity as the order of importance with which styles are applied to elements. Cascade in the context of CSS refers to the algorithm for solving conflicts when multiple CSS rules apply to an element. One of the major points of consideration during cascading is specificity.

Consider the code snippet below. In the HTML, a section element was created with a class and id of box. In the CSS file, that same section element was targeted in three different ways, it was targeted with the tag name section, its class name box, and the id name box. Now the bone of contention here is, which of these styles gets applied to the section?

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Specificity</title>  
 <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section id="box" class="box">

    </section>
</body>
</html>

/* styles.css */

section{
    background-color: red;
    width: 40px;
    height: 40px;
}

.box{
    background-color: blue;
    width: 40px;
    height: 40px;
}

#box{
    background-color: yellow;
    width: 40px;
    height: 40px;
}

The answer to the question above depends on specificity. How do we calculate the specificity of each CSS rule applied to the element? Here’s the thing, the order of specificity in CSS is inline CSS, !important > id > classes> HTML tags. There is an arithmetic trick to it, take inline CSS and the !important keyword as 1000 points, id as 100 points, classes as 10 points, and tags as 1 point.

!important, inline style- 1000
ids- 100
class- 10
HTML tags-1

Therefore, to answer the question of which style gets applied to the section element in the code snippet above. For the first CSS rule, the selector is just the section, which is an HTML tag hence, 1 point, for the second CSS rule, the selector is a class with the name box, hence, 10 points, for the last CSS rule, the selector is an id with the name box, hence, 100 points. The answer is no longer far-fetched, 100 is the largest number so the CSS rule with the id gets applied. The background color of the section would be yellow.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Specificity</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main id="main-page">
        <p style="color: green;">I love coding</p>
    </main>        
    </section>
</body>
</html>

/* styles.css */
main p{
    color: red !important;
}

#main-page p{
    color: blue;
}

In the code snippet above, use specificity to get the CSS rule that gets applied to the paragraph element. It is important to note that the element has an inline styling attached to it, hence, 1000 points for that CSS rule. For the first CSS rule in the styles file, two HTML tags are there, and the !important keyword, each of the tags is 1 point, and the !imporant keyword is 1000, which is 1002 points. For the second CSS rule in the CSS file, an id which is 100 points, and a tag which is 1 point, sums up to 101 points. 1002 is the largest number and this corresponds to the first CSS rule in the styles file. Hence, the color of the paragraph would be red.

A Very Important Concept Or Just Another Gimmick?

Bottom line? The concept of specificity in CSS helps a lot in debugging. For instance, if you apply a CSS rule to an element and this style does not seem to take effect in the browser, it could be due to some reasons, one of which might be specificity. There might be a style somewhere in your CSS file or even inline CSS overriding the style you keep applying, the concept of specificity helps solve these bugs.

Separation Of Concerns in Front-end Web Development

Emor Musk — Sun, 14 Jan 2024 16:19:30 +0000

Now you might be wondering what the term ‘Separation of concerns’ means, don't worry too much because this article contains everything you need to know. Separation of concerns is simply the principle that promotes software division into independent modules, each handling a specific functionality. It is a rule used to separate software into units, with minimal overlapping between the functions of the individual units.

Here’s the thing, think of the separation of concerns as a situation whereby smaller units of a main unit are each primarily concerned with handling unique and specific tasks. All the tasks could have been handled by the main unit as a whole but this time, it gets passed to each smaller unit and each of them has their primary concerns and that is the only thing they should be concerned about.

Front-end web development is the aspect of web development that deals with what is seen and interacted with on the website. This is also referred to as client-side development. HTML, CSS, and Javascript are the fundamental building blocks of front-end web development. HTML which stands for HyperText Markup Language is used for structuring the web page, CSS which stands for Cascading Styles Sheets is used for styling the web page, while Javascript is used for adding interactions to the webpage.

Now in front-end web development, separation of concerns implies distinguishing between HTML for structure, CSS for style, and Javascript for interactions. This means your HTML should only be meant for structuring the content of your webpage and that alone, your CSS should only be meant for styling the webpage and nothing more while your Javascript is for interactions on the webpage.

Inline styling in HTML defeats the concept of separation of concerns in front-end web development. HTML should only be concerned with the structuring of the webpage, not the styling. Anything that has to do with styling should go in the CSS file. Another example is using tags that apply styles to elements like the strong tag, the em tag, the u tag, etc. They are HTML tags, yet they apply styles to elements. As stated above, following the rule of separation of concerns, HTML should only be concerned with the structure of the webpage, the styles should go to the CSS file.

Categorically speaking, adopting separation of concerns in front-end web development has a lot of perks. One of them is that it improves code readability and organization which in turn aids collaboration among developers. When the HTML file contains only the markup, the CSS file is just the stylings, and the javascript file is just the functionality code. It helps other developers to comprehend your code because they know where exactly to find whatever they want to work on since the codebase is separated based on concerns.

Furthermore, it encourages a modular and organized approach to building web applications. This makes the code easily maintainable and extensible since it is easier for other developers to work on the project. Since the codebase organization becomes improved due to the separation of concerns, incremental adoption becomes easier because it would be easier for developers to collaborate on the project.

The Way Forward?

Bottom line? Separation of concerns is a principle that fosters collaboration amongst developers due to its perks stated above. Choosing to adopt a different approach while writing your code is not wrong. Still, the separation of concerns is a generalized code-writing convention accepted by a lot of developers due to its good organization. Therefore, it is an approach that is advisable to pick up on your projects.

Map- One Of The Most Important Array Methods In Javascript

Emor Musk — Fri, 12 Jan 2024 05:54:19 +0000

To begin with, what is an array? An array refers to a data structure used to collectively group elements. These elements could be of the same or different data types like string, number, boolean, etc. In other words, think of an array as a container for grouping elements. Arrays are useful for maintaining and organizing data elements clearly and efficiently.

//array containing elements of the same data type

let array_of_numbers=[1,2,3,4,5]

//array containing elements of different data types

let arr=[7,'Sam',True, undefined]

A method is a function attached to an object. Methods in Javascript are called with the dot operator. Now, under the hood, everything in Javascript is an object and has methods. The data type string has several methods like the length, toUpperCase, indexOf, etc. Array methods are functions peculiar to arrays that allow us to perform some tasks on arrays. Some of the array methods include sort, reduce, filter, etc.

Map Method

The map method is an array method that is used for iterating over the elements in the array and returning a new array. The map method can take in three parameters: the element, index, and array. The element is each element of the array being iterated on, the index is the index of each element of the array being iterated on, and the array is the array itself being iterated on.

let ages=[22,20,21,19,18,16,21]
//For the map method, three parameters can be taken in, the element, index, and the array itself

const newAges= ages.map((element,index,array)=>{
    return element + 2
})
console.log(newAges)

//The answer would be [24, 22, 23, 21,20, 18, 23]

const newAgesIndex= ages.map((element,index,array)=>{
    return index 
})
console.log(newAgesIndex)


//The answer would be [2,3,4,5,6,7]

Categorically speaking, one of the most important features of the map method is the return value. Mapping over an array returns a new array without modifying the original array, hence, the array mapped over is left untouched and you have a new array based on the condition stated for the mapping. This concept supports the principle of immutability in programming, making it easier to avoid side effects, and also provides a clean and functional programming approach.

Furthermore, in libraries like React, the return value from the map method becomes very essential. React uses a component-based architecture, which simply involves breaking the webpage into components. When building out web pages, some components are repeated across the page, so it is always a safe practice to create a custom reusable component for them. This custom reusable component can not just be repeated numerous times in the code, that is redundant code. An array is created to store the data that should be in each component, this array is then mapped over and returns the custom component.

import React from 'react'

const File = () => {

    //array containing the recipes
    const recipes=['curry', 'thyme', 'onions', 'salt']

    const newArray= recipes.map(element=>{
        return <Recipe key={element} /> //Recipe is the custom reusable component 
        //the key property is meant to be a unique value for each iteration
    })

  return (
    <div>
      {newArray}
    </div>
  )
}

export default File

Moreover, when building a dynamic web page, data from an endpoint is required. Data gotten from endpoints could be of any data type, it could be a string, number, or object but more often than not they come in the form of arrays. Now, when this data in the array is to be rendered in the markup dynamically, the map method comes into play. The data in the array gets mapped over and for each element in the array, the component or what is to be returned gets returned in the markup.

The forEach method is often mistaken for the map method because it can take in the same parameters as the map method — element, index, and the array itself. They both don’t modify the original array. Still, the map method returns a new array after mapping over the original array. In contrast, the forEach method executes a provided function once for each array element and does not return a new array.

const ages= [8,9,10,6,7]

ages.forEach((element,index,array)=>{
    console.log(element+2)
})

//Notice that it does not return a new array, rather it works on the array elements based on the condition stated 
//The answer would be [10,11,12,8,9]

Map- The Most Important Array Method?

An array is a beneficial and important data type in Javascript because it sequentially allows for data organization. This data organization is needed in web development because, at times, the order of the data needs to be ensured and an array is perfect for that. All array method have their purposes and perfect use cases. There is no single array method that does not have a role it plays.

In summary, the map method is excellent for transforming data within arrays. It allows for easy transformation of each data based on certain criteria and also returns a new array. This is beneficial in web development because of its return value after the iteration which is later used to render elements on the markup or for subsequent coding.