Forem: Adavize A.

Simplified Responsive Web Development with SCSS/SASS

Adavize A. — Sat, 11 Mar 2023 12:45:00 +0000

Building responsive webpages can be challenging, especially when it comes to managing breakpoints and media queries. However, using SCSS can make this task much more manageable and efficient.

In this article, we will explore a helpful SCSS pattern for managing breakpoints and creating media queries. Please note that this tutorial assumes some basic knowledge of CSS and media queries.

A Brief Introduction to SCSS

For readers unfamiliar with SCSS, it is a CSS preprocessor that lets you write CSS styles with added functionalities.

With SCSS, you can have variables, loops, functions, and lots more in your stylesheet. In the end, it compiles to regular CSS code that web browsers understand.

According to sass-lang.com, SCSS is CSS with superpowers. It makes styling a whole lot easier and faster; let's explore.

Approach - Preview

Say we have elements with the class name list-item and we want to achieve the following:

On small screen widths, we want a font-size of 18px,
Then on larger screen widths, we want a font-size of 25px.

Here's a preview of how it works using this approach:

SCSS Code:

 .list-item {
     font-size: 18px;
     @include sm {
       font-size: 25px
     }
 }

Compiled CSS Output:

.list-item {
  font-size: 18px;
}
@media only screen and (min-width 600px) {
  .list-item {
    font-size: 25px;
  }
}

As seen above, @include sm is all that was needed.

Why this approach?

Simplicity and Maintainability

From the example above, we see that the responsive styles are nested within the same selector.

So whenever there is a need to maintain the rules for a selector, you'd have all of them in one place, instead of travelling through different media-query sections and redefining rules.

Also, it comes with simple conventional labels. If you're used to styling libraries with classes such as "col-sm-2" and "col-md-4", you can achieve this in your stylesheets:

.div {
    @include sm {
        grid-template-columns: 1fr 1fr;
    }
    @include md {
        grid-template-columns: repeat(4, 1fr);
    }
}

Implementation

This is achieved by combining the powers of SCSS mixins and content blocks.

Mixins let you define reusable style blocks, and content lets you project/embed styles into an already defined mixin.

Below is SCSS code that defines a mixin for small breakpoint - sm and embeds a media query for 600px.


 @mixin sm {

     @media only screen and(min-width 600px){
         @content; // projected content will be embedded here
     }

 }

C'est fini! Now whenever a selector needs specific styles for this media query, we include the mixin using its name, @include sm {...}.

Mobile First Consideration

Mobile first approach is a method of styling that prioritizes small screens. Styles are written for small screens first, then modified with queries for larger screens.

The examples used in this article so far follows this principle, but there are cases where the reverse is required.

I like to have mixins available for both methods. The major difference in the media queries are min-width: and max-width:.

I have created an SCSS snippet that contains my default breakpoints, you can find it on GitHub - breakpoints.scss.

Bundle Size Consideration

Using this approach may leave your final CSS output with many media query declarations. This is because for every @include, a corresponding media query is generated.

Depending on the size of your project, generating so many media query declarations may greatly affect its bundle size.

Every byte matters.

If you are very conscious about application bundle size, like I am, worry not. Thankfully there is a webpack plugin that groups similar media queries.

Hence, in your final CSS output, you get the old-fashioned single media query declaration (Yaaaay!).

Kindly checkout the plugin on NPM to find out more.

Conclusion

Please keep in mind that patterns are not usually a one-size-fits-all deal.

I do love this approach because it is quite minimalist and I have used on projects for two years now.

However, I am open to learn about your approach in the comments, including suggestions.

I hope you enjoyed this article, till next time.

Solving a medium algorithm challenge step by step — Minimum Number of Platforms Required for a Railway Station

Adavize A. — Fri, 01 Jul 2022 09:37:23 +0000

Hello 👋🏽, I came across the “Minimum Number of Platforms Required for a Railway” coding challenge and decided to share my solution.

I provide code implementations in JavaScript and C++ with clear explanations and time complexity analysis in the end. To fully understand this article, it is required that you have a working knowledge of basic programming concepts(variables, control structures, etc.).

The Question

Given the arrival and departure times of all trains that reach a railway station, the task is to find the minimum number of platforms required for the railway station so that no train waits.

The provided input is two arrays representing the arrival and departure times of trains that stop.
Note: The time values are in 24hr format.

Arrival = [ 900, 940, 950, 1100, 1500, 1800 ] Departure = [ 910, 1200, 1120, 1130, 1900, 2000]

Output: 3 (A minimum of 3 platforms are needed so that no train waits)

Explanation

The question provides arrival and departure times of all trains that pass through a station with separate arrays.

The data in these arrays are linked by their indexes in these arrays. For example, say train A, owning index “0” of both arrays, arrives at 9:00 and departs at 9:10. There is a waiting period between each arrival and departure. We can assume this allows passengers to disembark and board the train, and by default, there is one platform that all the trains use.

The problem arises when multiple trains have overlapping wait times, which can cause a block in the single platform, causing the trains to queue. This means that trains ready to depart may be delayed by a waiting train in front of them; therefore, they must wait extra time as they can not jump the queue.

For example, if train B is ready to depart, and there is a waiting train A in front of it, train B must wait until train A leaves. The goal is to find the minimum number of platforms that won’t result in any delay from overlapping times.

The illustration below shows how three trains with overlapping times queue using one, two or three platforms.

Assuming the maximum number of trains that wait at a particular time is three, then three platforms are required to ensure that no train waits for another to leave before it can — the needed answer.

The Approach

Since we know that the maximum number of trains present together at the station at a particular time is also the minimum number of platforms required so that no train waits. We can chronologically simulate each train's arrival and departure and record the maximum number of trains present together throughout the simulation.

During this simulation, we use a virtual queue to represent trains at the station at each moment. The answer will be the maximum length(or size) of the queue encountered during the simulation.

This solution employs a virtual clock to keep track of the present time during the simulation. To know which trains have supposedly departed the station, we compare the departure times of the waiting trains with the present time.

If you are familiar with the conventional “queue” data structure, please note that the virtual queue being referred to here is different. It is only a means to store and delete items.

The list below is a high-level summary of the approach:

Sort the input data in ascending order, according to their arrival times. I.e. the earliest train comes first.
Create variables to store
1. The virtual clock,
2. The virtual queue and
3. The maximum number of waiting trains seen at a particular time.
Loop through the sorted input (see step 1) from the beginning. Each current iteration of the loop represents the arrival of a train.
When a train arrives, the virtual clock is updated using the arrival time of the newly arrived train, signifying the present moment.
After updating the virtual clock, we check for supposedly departed trains and remove them from the virtual queue. This is achieved by comparing their departure times with the present time of the clock.
The newly arrived train is added to the queue, as it is presently at the station.
Suppose the virtual queue's current length (or size) is greater than any previously seen length, the “max” variable (created in step 2) is updated to this current length.
The “max” variable is returned as the answer at the end of the simulation (or loop).

JavaScript Solution

We begin by converting the input arrays into a single array of objects representing a train's data we will use in our solution to simplify the process. Below is an example of the format.

i.e { arrivedAt: 900, departsAt: 910 }

The helper function below, “makeTrainsArray”, creates an array of such objects. This helper function also sorts the array according to arrival time because the provided problem input is not guaranteed to be sorted.

Inputs:

Arrivals = [ 900, 940, 950, 1100, 1500, 1800 ] Departures = [ 910, 1200, 1120, 1130, 1900, 2000]



// Makes a single trains array, sorted chronologically with their arrival times
function makeTrainsArray(arrivals, departures, n) {
    const trainsArr = new Array(n)
    for (let i = 0; i < n; i++) {
        trainsArr[i] = {
            arrivedAt: arrivals[i],
            departsAt: departures[i]
        }
    }

    // Sort data according to arrival time
    trainsArr.sort((a, b) => a.arrivedAt - b.arrivedAt)
    return trainsArr;
}

Next, we write function to find the minimum number of platforms required



function findMinimumPlatforms(arrivals, departures, n) {
    const trains = makeTrainsArray(arrivals, departures, n)


    let virtualClockTime = 0;
    let maxTrainsWaiting = 0;
    // Using a JavaScript set because deleting an item is straightforward, compared to arrays
    let virtualQueue = new Set();


    // Taking each train sequentially to simulate arrivals
    for (let newlyArrivedTrain of trains) {
        // Update present moment to the time of newly arrived train
        virtualClockTime = newlyArrivedTrain.arrivedAt;


        // Remove supposedly departed trains from the virtual queue…
        // … using the present time.
        for (let train of virtualQueue) {


            if (train.departsAt < virtualClockTime) {
                virtualQueue.delete(train)
            }
        }


        // Add newly arrived train to virtual queue
        virtualQueue.add(newlyArrivedTrain)


        // Keep track of the maximum number of trains queueing at this particular time
        maxTrainsWaiting = Math.max(maxTrainsWaiting, virtualQueue.size)
    }


    return maxTrainsWaiting;


}

C++ Solution

There’s an issue with the JavaScript solution. In order to check and remove supposedly departed trains from the virtual queue, all items in the queue are visited, including non-departed trains. This process can be optimised using a “min-heap”.

A min-heap, also known as a “priority queue”, is a data structure that always keeps a reference to the smallest item in the “heap”.

The smallest item— the top, can be easily “popped” out of the queue.

The image below visualises the structure of a min-heap when all departure times from the example are inserted:

(Resources on min-heap data structure are at the end of this article).

This min-heap structure is not present in JavaScript by default. You’d have to implement a class or use an external library to use it. We will not be doing that in this article.

However, we can use the priority_queue data type present in C++’s STL— Standard Template Library. This way, we can quickly check for supposedly departed trains and remove them without visiting every item in the queue.

Below is a C++ implementation of the same solution, but checking for departed trains is done using a min-heap.



#include <iostream>

// The next two imports can be reduced to #include <bits/stdc++.h>, depending on your compiler.
#include <algorithm> // We'll need this for sorting
#include <queue> // We'll need this for the priority queue (or min heap)

using namespace std;

struct TrainData {
    int arrivedAt;
    int departsAt;
};

// Helper function for sorting with arrival times
static bool compareArrivalTimes(TrainData trainA, TrainData trainB)
{
    return (trainA.arrivedAt < trainB.arrivedAt);
}

// Helper function to make a trains array sorted chronologically with their arrival times
TrainData* makeTrainsArray(int arrivals[], int departures[], int n) {
    TrainData* trains = new TrainData[n];

    for(int i = 0; i < n; ++i){
        // Make a new train data using the defined struct
        TrainData train;
        train.arrivedAt = arrivals[i];
        train.departsAt = departures[i];

        trains[i] = train;
    }

    sort(trains, trains + n, compareArrivalTimes);
    return trains;
}

Next, a function to find the minimum function to platforms required



int findMinimumPlatforms(int arrivals[], int departures[], int n) {

  const TrainData * trains = makeTrainsArray(arrivals, departures, n);

int virtualClockTime = 0;

  int maxTrainsWaiting = 0;

// Using a priority queue data structure for the virtual queue.

  priority_queue < int > virtualQueue;

for (int i = 0; i < n; ++i) {

    // Update present moment to the time of newly arrived train

    virtualClockTime = trains[i].arrivedAt;

<span class="c1">// Remove supposedly departed trains from the virtual queue by using the present time.</span>
<span class="k">while</span> <span class="p">(</span><span class="o">!</span><span class="n">virtualQueue</span><span class="p">.</span><span class="n">empty</span><span class="p">())</span> <span class="p">{</span>
  <span class="kt">int</span> <span class="n">departureTime</span> <span class="o">=</span> <span class="n">virtualQueue</span><span class="p">.</span><span class="n">top</span><span class="p">()</span> <span class="o">*</span> <span class="o">-</span><span class="mi">1</span><span class="p">;</span>
  <span class="k">if</span> <span class="p">(</span><span class="n">departureTime</span> <span class="o">&lt;</span> <span class="n">virtualClockTime</span><span class="p">)</span> <span class="p">{</span>
    <span class="n">virtualQueue</span><span class="p">.</span><span class="n">pop</span><span class="p">();</span>
  <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="c1">// We can break out of the loop here because all departed trains have been removed.</span>
    <span class="k">break</span><span class="p">;</span>
  <span class="p">}</span>

<span class="p">}</span>

<span class="c1">// Add newly arrived train to queue (note we are storing only the time in the priority queue)</span>
<span class="n">virtualQueue</span><span class="p">.</span><span class="n">push</span><span class="p">(</span><span class="n">trains</span><span class="p">[</span><span class="n">i</span><span class="p">].</span><span class="n">departsAt</span> <span class="o">*</span> <span class="o">-</span><span class="mi">1</span><span class="p">);</span>

<span class="c1">// Keep track of the maximum number of trains queueing at this particular time</span>
<span class="n">maxTrainsWaiting</span> <span class="o">=</span> <span class="n">maxTrainsWaiting</span> <span class="o">&gt;</span> <span class="n">virtualQueue</span><span class="p">.</span><span class="n">size</span><span class="p">()</span> <span class="o">?</span> <span class="n">maxTrainsWaiting</span> <span class="o">:</span> <span class="n">virtualQueue</span><span class="p">.</span><span class="n">size</span><span class="p">();</span>



}

// Free up allocated memory ;)

  delete trains;

  return maxTrainsWaiting;

}

Analysing The Time Complexity

In this section, we analyse this solution's time complexity using “big O” notation.

Here are some things to note:

Sorting processes generally perform an O(n * log(n)), and we used a sort function.
The simulation loop performs an O(n) operation since every item is visited once. Denoting the length of the input as n.
There is a nested while loop within the simulation loop, denoting the maximum length of the queue as m; this nested loop performs an O(m) operation.
Inserting and deleting items from a priority queue, in the worst case, will perform an O(log(m)) operation.

In time complexity analysis, the big O of the algorithm is that of the worst operation performed within the algorithm.

At first glance, it seems like the sorting step is the most costly operation, making this an O(n * log(n)) solution.

Suppose m > log(n), the attention of the time complexity shifts from the sorting process to the simulation loop.

The simulation loop nests another loop— denoted with O(m). Hence the time complexity of the JavaScript solution is O(n * m).

The C++ solution performs “delete” operations on the min-heap, which has a time complexity of O(log(m)). We can then say the algorithm's time complexity is O(n * m * log(m)).

The main difference between the JavaScript C++ solution is that the JavaScript solution is guaranteed to complete all iterations of “m”. The C++ solution can break out of the loop once it has removed all departed trains— using the min-heap, it doesn’t waste time checking non-departed trains. Thus, it is seemingly more efficient.

Conclusion

When coming up with a brute force solution, it is helpful to determine how you understand the problem, what a working solution is and what would make a working solution. Then you can attempt translating that thought process into code with the help of data structures.

It is common for algorithm challenges to have multiple solutions. There are other solutions to this problem, including more efficient ones. It is okay if you come up with a different approach to this problem.

This article was written to help people get comfortable with data structures and algorithms and translate their thought processes into code to arrive at a solution.

I hope you enjoyed it. Thanks for reading.

Resources

To learn more about priority queues:
https://www.programiz.com/cpp-programming/priority-queue

You can practice your solution against test cases here:
https://practice.geeksforgeeks.org/problems/minimum-platforms-1587115620/1#

Big O Notation:
https://www.doabledanny.com/big-o-notation-in-javascript

Solution files on GitHub:
GitHub Repo

The Purpose of Git and GitHub in Development — A beginner-friendly explanation

Adavize A. — Sat, 11 Jun 2022 04:40:38 +0000

If you are relatively new to programming, there comes a time when you come across Git and GitHub. This may be when you want to deploy a project on the internet, share your code, collaborate on projects with other developers, help someone else with their code, etc.

Jumping on a Git tutorial without understanding the purpose of Git can be confusing. In this article, I will explain why tools like Git and GitHub are essential in the software development ecosystem, using beginner-friendly analogies.

Life Without Git

Let’s assume you are working on a project using your personal computer. You will have a project folder that contains your code files and configurations on which you have been making changes.

Now, let us simulate a week’s work:

On Monday:
You wrote the code for four new features - features A, B, C, and D.

On Tuesday:
You fixed a bug, bug X.

On Wednesday:
You removed two features, B and C, because they seemed unnecessary, and you deleted quite a lot of code in the process.

Thursday:
You realise that one of the features you deleted from your code on Thursday, say feature C, is an essential feature, and you need to get it back.

A possible solution is to rewrite the code, but remember, it was a lot of code, so that would be stressful.

Let’s assume you made a copy of the files before removal (probably as a precaution). You’d still go through the “stress” of copying the code from the “backup” and merging them with your current work files; this process is one of the reasons why Git exists.

Lastly, on Friday:
While testing your code, you realise that the bug you fixed on Tuesday introduced other disturbing bugs, and you wish to undo your “bug fix”. There isn’t much that Ctrl + Z can do to help in this situation.

Wouldn’t it be nice to have a magical time travel machine in these scenarios? That can easily take us to previous versions of our project, as they were at a specific time? Think of Git as that time travel machine.

What Does Git Do?

Git provides a "version-control system". This means Git helps you manage or control different versions of your project.

How Git Works

Managing your project using Git means Git will keep an eye on files and directories in that project— tracking.

Git notices the changes made to tracked files in your project. These changes are then “committed” into Git’s history.

When changes are committed, Git takes a “snapshot” of the files, so it remembers the exact state of the files at that time, just like a photograph.

You can have as many commits as you work on your project, and when the need arises, you can view or restore your files to a previous commit. Git will give back your files exactly as they were when you made the commit— the required time travel.

Also, with Git, you can easily switch between different versions of your project, compare and track the changes over time, collaborate with other developers and lots more.

Here’s an illustration to help you visualise the timeline.

What about GitHub?

Git has numerous features that help simplify development; another is making collaboration organised.

Imagine you are working remotely with about ten other developers on the same project. Without Git, there will most likely be a lot of confusion and mishaps.

When multiple people work on the same file, how is this sorted?
What happens when the file you made changes to gets deleted on someone else’s computer?
How do you know who made a specific change and when this change was made?
Most importantly, how is everyone’s contribution combined in the project?.

Will everyone attach their work files in an email and send them to a “manager” who then downloads and sorts it all? And does this hectic process have to be repeated for every little change? Hopefully not.

As earlier mentioned, Git helps to keep collaboration organised.

A project being managed with Git is known as a repository, and this is where GitHub comes in.

GitHub helps to host your project repositories on the internet. Your project files are stored on the internet, making them accessible to remote collaborators.

Contributors to that project can have a local copy of the project on their computers, make changes on their local copy and “push” those changes back to the online repository.

With Git and GitHub, changes pushed from several collaborators are easily organised, combined and managed. Everyone with access to the online repository can see these changes and update their local version. Cool right?

Here’s an illustration to help you visualise:

Conclusion

Git and GitHub have many other incredible benefits. I hope you now understand the purpose of Git and GitHub and why they are essential tools in development.

I should mention that there are other version control systems and hosts for repositories.

Goodluck learning.

Learning Git as a beginner - Tips

Adavize A. — Fri, 10 Jun 2022 22:01:24 +0000

Learning how to work with a new tool as a beginner could be exciting, frustrating, or a mix of both. The concentration of that mix depends heavily on how you learn it.

In this article, I will share tips that helped while I was just learning Git.

Understand the why

Knowing the purpose of a version control system such as Git in a development environment will help you understand “what is going on” while learning. When you "git add" a file, what happens?

Focus on understanding Git itself at the initial stages of learning. Things like:

What does it mean to commit files?
When should I tell Git to ignore files?
What does it mean to pull changes? What are changes?.
What causes a merge conflict? What is done to resolve this?
Etc.

If these terminologies do not make sense to you yet, it is totally okay, just keep an eye out for them while learning.

See The Purpose of Git and GitHub in Development — A beginner-friendly explanation.

Get familiar with the terminal (Console, CLI)

Most people who use computers today are comfortable with using graphical user interfaces. Although there are GUI options for Git, familiarity with the terminal is very helpful for software developers.
When starting out, you do not need to master how to use the terminal like a hacker; a basic understanding is enough.

Actions such as these can help you get comfortable with the terminal:

Basic file commands, e.g. create and navigate through directories, list files and folders in a directory, copy, move, delete etc.
Create and open files using the terminal, e.g. create a text file and open it with a text editor
Whatever feels right to practice with, just don't recursively delete your files.

When you are comfortable using the terminal, running Git commands shouldn’t be tough.

Avoid cramming commands, use a cheat sheet instead

With time and practice, the commands and their respective meanings gets easier to remember.

PS: There are a few basic commands that are helpful and important to remember, but don't go memorising all of Git's commands.
Using a "cheat sheet" helps— A list of commands with short descriptions for quick reference.

Also, searching the internet for things you don’t remember isn't a bad idea (we’ll get to this in the next heading).

Here’s a cheat sheet from GitHub education; please note that you can always make your simplified personal version - Git Cheat Sheet

GIYF

GIYF - “Google Is Your Friend” is a famous phrase in the ecosystem. If your favourite search engine works fine, that’s cool too.
Most bugs and issues you will face are probably somewhere on the internet, with solutions from people who have already overcome them.
It is helpful to dig the internet for answers, and I believe it is okay to look up what you don’t remember.

Remember to search using phrases of what you are trying to achieve, your error codes and messages etc.

Avoid getting stuck with a single learning resource

There are tons of learning resources out there. Some are good, and some are not so great.

You could be learning from books or videos, but wherever you’re learning from, if need be, check for alternatives that help you understand better.

Ask for help

Asking questions while learning helps make learning easier. But before asking I advise searching the internet first.

You could ask an online tech community, a local tech community, a more experienced friend, a mentor etc. Just be sure to structure your questions in ways that make it easy for people to understand and help out. Note that people have their schedules.

Here are helpful things to include while asking for help:

Where you’re coming from
What you’re trying to achieve
The problem you’re facing
Include error codes, error descriptions and other details that can help others understand your error
Include your attempts to resolve the issue if you’ve tried anything
Be sure to ask nicely, and leverage the magic words.

E.g. Hey, I cloned a repository, worked the files and committed my changes. Now when I try to push to the remote repository, I get the error “error here”. Can anyone tell me what’s wrong? Thanks.

Practice

We learn by doing! After taking Git tutorials and lectures, you need to put them into practice to master the knowledge you’ve gained.

Use Git to manage your personal and real-world projects; this will help you get familiar with the various scenarios that occur when working with Git.

Conclusion

I hope you find these tips helpful. May the force be with you <3