DEV Community: Md Mazidul Haque Farabi

Understanding Big O notation for beginners

Md Mazidul Haque Farabi — Tue, 01 Nov 2022 04:16:57 +0000

Suppose you and your friend were shuffling two decks of cards. Now, another friend who saw you two, challenged both of you to sort the cards based on their order of power and declared that the one who can do it the fastest wins and gets a treat from whoever loses.

So, both of you start going through your cards one by one. You put one card aside in your right hand and check if the card at the top of the pit, on the left hand, is smaller or greater than that card. If it is smaller, you put it below that card on the right hand, and if it is larger, you put it above that card. When you have three cards in the right hand, you again check if the card on top of the pit is smaller or larger than those three cards. Thus, you have to check each card with - each other card each time you sort a card.

Your friend, on the other hand, being smarter than you, simply lays down all the cards and starts arranging them by order without comparing each card. And after one minute, when you are nowhere near even halfway sorting through the cards, your friend has completed the task and won the challenge - as you are left with an unshuffled deck of cards and a treat to give.

Big O notation, put in simple words, is the cost of an algorithm designed to achieve a certain function. The foundation of Big O notation can be explained as the complexity encountered by a conditional loop and the time and memory it took to run through that piece of code inside the loop. German mathematicians first discovered Big O notation and it was made familiar to the world of computer science by the famous Donald Ervin Knuth who was a former professor emeritus at Stanford University. It is expressed by the symbol O(n) where n is a variable that depends on the performance of an algorithm with added complexities.

Now, back to the card-deck sorting challenge - the strategy that you chose to arrange cards can be said to have a Big O notation of n² or O(n²). Here, n² in programming terms suggests that the time and memory consumed by a CPU would increase by the square of the number of inputs. Meaning, the more cards you have in a deck, the amount of time it will take you to completely sort it will be a square function of the number of cards in the deck - if you took a constant amount of time to check and place each card in its position. This can be compared to insertion sort.

let unsortedDeck = [4, 10, 1, 7, 9, 3, 8, 2, 12, 11, 13, 5, 6];
let n = unsortedDeck.length;

function yourSort(unsortedDeck, n) 
{ 
    let i, currentCard, j; 
    for (i = 1; i < n; i++)
    { 
        currentCard = unsortedDeck[i]; 
        j = i - 1;
        //j denotes to the previous card of currentCard

        /* Move cards of unsortedDeck[0..i-1], that are 
        greater than the currentCard, to one position ahead 
        of their current position */
        while (j >= 0 && unsortedDeck[j] > currentCard)
          //if previous card greater than currentCard
        { 
            unsortedDeck[j + 1] = unsortedDeck[j];
          //move one position ahead if greater
            j = j - 1; 
        } 
        unsortedDeck[j + 1] = currentCard; 
    } 
}
//unsortedDeck is now sorted 

function printArray(unsortedDeck, n)
//function to print all cards
{ 
    let i; 
    for (i = 0; i < n; i++) 
    document.write(unsortedDeck[i] + " ");
} 

//run functions
yourSort(unsortedDeck, n); 
printArray(unsortedDeck, n);

Again, the strategy that your friend chose would have a notation of n or O(n), meaning, it would take him only a certain amount of time which should be much less than that of yours as the deck increased in size since he used a linear function.

let unsortedDeck = [4, 10, 1, 7, 9, 3, 8, 2, 12, 11, 13, 5, 6];
let n = unsortedDeck.length;
let sortedDeck = [];

function yourFriendsSort(unsortedDeck, n) 
{
sortedDeck = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
/*since your friend can see and arrange cards
without having to compare cards as he
laid down all the cards for a better view*/
}

function printArray(sortedDeck, n)
//function to print all cards
{ 
    let i; 
    for (i = 0; i < n; i++) 
    document.write(sortedDeck[i] + " ");
} 

//run functions
yourFriendsSort(unsortedDeck, n); 
printArray(sortedDeck, n);

But if it was the case that there were only three cards in the entire deck (a near best-case scenario), it could’ve been a tight contest as you had similar chances of doing it faster than your friend did.

Another thing to remember is that sometimes programmers declare and assign variables inside a loop while it could've been globally declared out of the loop and assigned inside the loop; therefore which causes the variable to declared a hundred or even a thousand times - as many times as the loop runs. And while it doesn't cost a time delay in most cases, it's a bad practice and should be avoided.

Big O notation lets programmers identify how slow or fast an algorithm will be in the best-case and worst-case scenarios. As an enterprise-level software needs to scale up, Big O notation helps maintain a constant speed to provide the same results to millions of users rather than slowing down as the number of users increases.

Refer to the Big-O Cheat Sheet and this Medium article to know about the Big O notation of common data structure operations so you can use the suitable conditionals and create the most efficient algorithms.

Cyber security - common vulnerabilities and their prevention methods which every aspiring developer should know about

Md Mazidul Haque Farabi — Sun, 23 Oct 2022 15:28:20 +0000

There are many common vulnerabilities that are being exploited far too often by hackers on the internet - as they endeavor to abuse protected information by making it public: such as passwords and associated email addresses, or phone numbers.

In order to execute these attacks, hackers repeatedly use methods such as brute force, phishing, SQL injection, XSS, CSRF, DDoS, etc. Broken access controls, unencrypted data transmission, and storing passwords in the database without hashing are also some major malpractices that invite evil hackers to be tempted to find a way into the system and annihilate it.

Old hashing algorithms such as MD5 have already been cracked and therefore developers should aim for an updated algorithm such as BCrypt or better.

Phishing attacks are more commonly used to steal the login credentials of a user's email or another important service - as the user enters the password in an exactly similar-looking page's password field, not knowing that this wasn't the actual website and his data was sent to the hacker's database. Sometimes hackers use ransomware to blackmail companies into paying a hefty amount out of fear of being sued or facing legal charges if sensible information about customers is leaked. Validating uploaded files is very necessary because they may contain malware or Trojans.

Kali Linux, although made for penetration testing purposes, is more commonly used by hackers as it offers lots of free tools to ameliorate their approach. Web3, even being serverless, has its own set of vulnerabilities. Identity theft in mobile banking has also been a profitable scam for fraudulent con artists in the South Asian regions.

When Canva got hacked in 2019, about 140 million users had their data breached. And on March of 2021, CNA Financial had to pay more than $40 million in ransom after being targeted for a cyberattack.

Recently, Uber - the pioneer of ride-sharing companies was hacked by a teenager who used social engineering techniques to get access to a restricted workspace and manipulate it. Numerous such attacks are happening every day.

To avoid these sorts of online invasions, web developers must be aware of the methods hackers use and also know how to prevent them. The Open Web Application Security Project (OWASP) has documented the top security vulnerabilities that are frequent on the internet, along with measurements to take as a precaution for those frailties. I'm going to use Java to explain some security steps that must be in order.

Some good practices for programmers can be

to use code frameworks that initially come with security protocols

Express for Node.js, Django for Python, Rails for Ruby, Laravel for PHP, ASP for C#, and Spring for Java.
to filter out suspicious texts from forms and field entries

//AntiSamy is a Java component that can sanitize HTML/CSS to eliminate potentially malicious JavaScript.
antisamy.safe(request.getParameter("name"));

to use prepared statements while writing SQL queries

//a select query in SQL using prepared statements
PreparedStatement=Connection.prepareStatement("SELECT * FROM registerform WHERE name =? AND email =?", ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_UPDATABLE);
PreparedStatement.setString(1, username);
PreparedStatement.setString(2, email);
ResultSet=PreparedStatement.executeQuery();

Again, backend or full-stack developers should also

always encrypt or hash sensitive information

//call an AES encryption class to encrypt text
encryptedText = aes.encrypt(text, key, salt);

assign and validate a CSRF token with each form

//add csrf-token in HTML
<INPUT TYPE="HIDDEN" NAME="csrf" VALUE="<%=generateCSRF.csrftoken()%>">

//verify using backend
String token = request.getParameter("csrf");
        if (csrfverifier.verifycsrftoken(token)) {
//csrf-token verified

check all the input data or uploaded files with server-side functionality

//this code checks if a password follows the recommended variation and redirects back if otherwise
if(request.getParameter("password")==null || request.getParameter("password").length() < 8 || !Pattern.matches("^(?=.*[A-Za-z])(?=.*\\d)(?=.*[@$!%*#?&+=_,.-/(){}])[A-Za-z\\d@$!%*#?&+=_,.-/(){}]{8,}$", request.getParameter("password"))) {
        try
    {
            response.sendRedirect("signup.jsp");
            session.setAttribute("message", "Password must be at least 8 charecters long!<br>(with at least one letter, one number and one special charecter)");
            flag = 0;
            return;
        }catch(Exception ex) {
    }

//this code checks if the uploaded file is an image and returns the image format
String format = "none";
ImageInputStream iis = ImageIO.createImageInputStream(new File(dir));
// get all currently registered readers that recognize the image format
Iterator<ImageReader> iterate = ImageIO.getImageReaders(iis);
          if (!iterate.hasNext()) {
              return format;
          }
          // get the first reader
          ImageReader reader = iterate.next();
          format = reader.getFormatName();
          // close stream
          iis.close();
return ".".concat(format);

not rely on JavaScript for validation

//this code only validates symbols in JavaScript, which can be bypassed easily
  var symbols = /[@$!%*#?&+=_,.-/(){}]/g;
  if(myInput.value.match(symbols)) {
      symbol.classList.remove("invalid");
      symbol.classList.add("valid");
  } else {
      symbol.classList.remove("valid");
      symbol.classList.add("invalid");
  }

It’s a good idea to include a confirm authorization process to prevent brute force attacks in case of too many wrong login attempts.

//each time a user fails to enter the correct login details, increase the number of attempts for that user in the database by 1
attempts += 1;
//if a user fails five or more consecutive times to login, redirect the user to another page to verify identity
if (attempts > 4) {
response.sendRedirect("forgotyourpassword.jsp");
return;
}
//if a user correctly logs in, (before entering the wrong password for five or more consecutive times) set the number of incorrect attempts back to 0
attempts = 0;

Cookies should also have a secure, HttpOnly and same-site-strict attribute added to them to avoid cookie-hijacking.

//a way to set cookies with attributes in Java
response.setHeader("Set-Cookie", "key=value; HttpOnly; SameSite=strict")

CMS-powered websites such as WordPress sites are also not out of the threat and require different security strategies which may be found in the form of security plugins. Not having an HTTPS-secure padlock should be a clear red flag to visitors trying to access a website, as it indicates that the site doesn’t use a proper SSL/TLS protocol.

Websites that use SSL/TLS will have a padlock icon next to their domain, and their URL will start with https://, while websites that don't use SSL will not have the padlock icon or may have a cancelled padlock icon and their URL will start with only http:// and might also show a warning before you proceed to view the pages of that website.

It is advantageous to further use security enhancement functionalities provided by organizations like OAuth and Cloudflare to ensure a safer online infrastructure. Also, developers can use reCaptcha or hCaptcha to keep out unwanted programs.

Websites that have captcha enabled, may show an I'm not a robot pop-up or may be seen as a protected by xyzCaptcha at the bottom-right corner of a page.

It must always be remembered that security should be the top priority while making critical web platforms that require online transactions or the storage of sensitive information. And that all other factors such as page speed, responsiveness, and UI should be down the list - after security. As security measures are placed, developers should try out their defense mechanisms by penetration testing their website while using sandbox credentials. Setting up two-factor authentication and Identity and Access Management should be taught to all the employees of a company.

Two-factor authentication or 2FA uses a changing-OTP prompt that only the user has access to by an app or device. Identity and Access Management can be used to deny some Admin roles or Root access to designers and developers, (working on the same Cloud Service or other workpspace) who shouldn't have those roles.

Moreover, most registration-based websites now urge their users to create a strong password that is hard to guess.

A strong password consists of at least 8 charecters (with at least one letter, one number and one special charecter).

The Concept of Hybrid UI

Md Mazidul Haque Farabi — Fri, 21 Oct 2022 05:41:33 +0000

The fact that writing media queries is a massive headache for web designers cannot be overlooked. In fact, media queries, in the first place, is what I believe to be a traditional format of responsive design - requiring to open the inspect tool countless times or always keep connected with ngrok for keeping track of responsiveness. While some may disagree with me and quote me as an amateur in the web design world, many others will agree that there should be a better way.

/* For Desktop View */
@media screen and (min-width: 1024px) {
  .gfg-div {
    background-color: #63c971;
    color: #fff;
  }
}

/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: orange;
    color: black;
  }
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
  .gfg-div {
    width: 200px;
    height: 200px;
    background-color: red;
    color: #fff;
  }
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
  .gfg-div {
    width: 400px;
    height: 200px;
    background-color: cyan;
    color: black;
  }
}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
  .gfg-div {
    width: 400px;
    height: 200px;
    background-color: chartreuse;
    color: black;
  }
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: brown;
    color: black;
  }
}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: cornflowerblue;
    color: black;
  }
}

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
  .gfg-div {
    width: 400px;
    height: 400px;
    background-color: darkgoldenrod;
    color: black;
  }
}

The code above should give an idea of how tedious it can be to manage every single element with media queries.

I've been making hybrid apps myself for three years. And the advantage of hybrid apps is that you don't need to go through the learning curve of coding an app in Kotlin, Flutter, or Swift; you just need to know how to make a responsive website and convert it into an app. The easiest approach to do this is to use online app builders like the MIT app inventor or its revamped versions such as Appybuilder, Kodular, Niotron, Thunkable, etc, and place your website inside a webview container. These builders also give you a lot of functionalities to add so that your website behaves more like an app with drag-and-drop elements and code blocks. But the usefulness of making an app following that process is strongly dependent on how responsive your website is.

The concept of hybrid UI is that the same UI is persistent in both the desktop version and the smaller screens. To start with, most websites that we see nowadays have a responsive header that has a hidden menu only for devices with relatively lower screen dimensions.

This approach requires setting up multiple media queries for better responsiveness across mobile browsers. But we don't see these headers in mobile apps. Why is that? Because mobile app headers usually have a top or bottom navigation menu which is better in terms of appearance and UI.

What we overlook is that desktop screens can also have a top or bottom navigation menu and still look absolutely standard.

Moreover, the central menu in this bottom navigation gives the developer more room to make up for the dropdown nav-bar structure used in desktop headers.

Then we can come to the content section, where desktop screens have a larger display size, and should be utilized. Older responsive websites would only use the 760 pixels in the center, just to keep the website responsive. That was a huge cutoff in terms of design and UI for desktop users. But it shouldn't be the case now as most mobile phones already have much higher resolutions. A good idea is to compromise a bit of screen size in order to compensate and keep the design less complicated with not requiring tons of media queries.

Again, whether a website actually requires a footer should be reconsidered as apps don't usually have or need footers. Also, the top progress bar might be used as webview apps don't have a scroll level indicator either. Having Lottie or Blush animations, and an elegant pagination is a plus.

Finally, a basic hybrid UI that I was able to build can be seen in this pen.