DEV Community: Sanskrati Jain

DSA: How not to learn Data Structures and Algorithms

Sanskrati Jain — Thu, 01 Feb 2024 18:06:11 +0000

Introduction:

Welcome, brave souls, to the ultimate guide on how to avoid mastering Data Structures and Algorithms (DSA). In a world obsessed with efficiency and optimized code, we present to you a rebellious journey filled with pitfalls, distractions, and ingenious methods to dodge the DSA bullet. Brace yourselves, because we're about to embark on a hilarious adventure of "How NOT to Learn DSA!"

1. The Procrastinator's Paradise:

Forget about setting a schedule for DSA studies. Instead, let the pressure build until the night before your coding interview. Panic mode: activated.
Who needs consistent practice when you can cram all the knowledge into your brain in a caffeine-fueled frenzy? It's not like algorithms require a clear mind, right?

2. The Blindfold Technique:

Begin your coding journey by skipping the basics. Why waste time on mundane concepts when you can jump straight into advanced topics? It's like reading the last chapter of a book first – unconventional and utterly bewildering.
Remember, understanding the fundamentals is for mere mortals. Real coding wizards navigate the complex world of algorithms without any guiding lights.

3. Algorithm Obfuscation:

Elevate your coding to an art form by crafting code that's as confusing as a quantum physics lecture. Use variable names like a, b, and c, and employ one-letter function names for an extra layer of mystery.
Embrace the challenge of deciphering your own code months later. It's like leaving secret messages for your future self, assuming you can crack the code!

4. Copy-Paste Prowess:

Google your way to coding success. Who cares about understanding the intricacies of an algorithm when you can copy and paste code from Stack Overflow? Your coding journey is essentially a treasure hunt for the perfect snippet.
Remember, it's not about reinventing the wheel; it's about finding the wheel that someone else invented.

5. LeetCode for Leisure:

Turn coding challenges into a casual game. Solve problems without bothering to understand the underlying principles. Time and space complexity? Pfft. Just wing it!
Treat LeetCode like Candy Crush – an addictive game you play on your phone during a commute, without giving a second thought to strategy.

6. Language Jumping Olympics:

Master the art of language hopping. Today it's Python, tomorrow it's Java, and the day after, who knows? Keep your coding languages in a constant state of flux to ensure maximum confusion.
Your goal is to be a polyglot of programming languages not an expert in any, but a jack of all trades.

7. Documentation Detox:

Ignore documentation like it's a plague. Real programmers don't need hand-holding; they dive headfirst into code without looking back.
Treat documentation as the forbidden fruit, and revel in the mystery of your own missteps. Who needs guidance when you can navigate the coding wilderness blindfolded?

8. Debugging Drama:

Infuse drama into your debugging sessions. Introduce bugs purposefully just to keep things interesting. Debugging is not a chore; it's a theatrical performance, and you're the star.
Welcome every bug as a new character in your coding saga. After all, debugging without chaos is like a symphony without dissonance.

Conclusion:

Congratulations! By following this foolproof guide, you've successfully mastered the art of NOT learning Data Structures and Algorithms. As you embark on your coding adventures with reckless abandon, remember: that the path less optimized is often the most entertaining. Happy coding (or not)!

Bootstrap - Layout

Sanskrati Jain — Sat, 15 Jan 2022 09:31:48 +0000

This is the continuation of the first part Bootstrap - Introduction. In this, we will discuss breakpoints, containers, grids, columns, and gutters.

Breakpoints:

These are customizable widths that determine the looks of our web page on different devices like min-width in media-queries.

Bootstrap has 6 default breakpoints that can be modified as per the programmer. These are customizable via Sass in our _variables.scss stylesheet which is present in our downloaded files.

So, basically, if we create a class called container-md or we can use it is by default for the dimension ≥ 768px.

Container:

Most basic layout, used when using the default grid system. We need to create a class named container which will set some padding and align by default.

.container, which sets a max-width at each responsive breakpoint
.container-fluid, which is width: 100% at all breakpoints
.container-{breakpoint}, which is width: 100% until the specified breakpoint

In place of {breakpoint} we use sm ,md , lg , xl, and xxl

<div class="container-lg">
Container
</div>

The output of this code will be

When the width of the window is greater than lg , there is padding on the left and right sides of the container.

When width is smaller than lg width, the padding disappers

Grids

This is based on the twelve-column system. Think that the screen is divided into twelve columns of equal size, and we can set the size by defining how many columns we have to occupy.

.col , sets all columns of equal size and we can have a maximum of 12 columns in a row
.col-{1 to 12} , in place of {1 to 12} we can have a number, which will define how many columns should be occupied. For example, col-6 will have a width of 6 columns out of 12 columns.
col-{breakpoint}-{1 to 12} , this means that below that breakpoint the width will be that number.

Note: If we define the size of the column then that column will have that size permanently, it will not be responsive anymore.

Example

<h2>Grids - Column and Row</h2>
<div class="container">
  <div class="row">
    <div class="col-lg-2 col-md-4 col-sm-6">Col 1</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
    <div class="col-lg-2 col-md-4 col-sm-6">Col 2</div>
  </div>
</div>

The output of this code will be:

col-lg-2 when the width is below lg

col-mg-4 when the width is below md

col-sm-6 when the width is below sm

Instead of defining .col-{width} inside the column, we can also use rows like row row-col-{width} .

Vertical Alignment

For alignment we have align-self-start ,align-self-center and align-self-end which we use inside .col andalign-items-start ,align-items-center and align-items-end which we use inside .row .

Horizontal Alignment

For this we have justify-content-start ,justify-content-around justify-content-between ,justify-content-evenly which we use inside .row .

Gutters

Gutters are the padding between your columns, used to
responsively space and align content in the Bootstrap grid
system.

.gx-{1 to 5} classes can be used to control the horizontal gutter widths.
.gy-(1 to 5) classes can be used to control the vertical gutter widths.

---

I highly recommend to read the official documentation for more information.

Bootstrap - Introduction

Sanskrati Jain — Thu, 13 Jan 2022 15:55:21 +0000

This is the first part of the series on Bootstrap for beginners. In this part, we will learn about the bootstrap and its installation.

What is Bootstrap?

It is the most popular front-end framework, used for building responsive web applications.

Why use Bootstrap?

Increase speed
Assure responsiveness
Prevent repetition between projects
Add consistency
Ensure cross-browser compatibility
Large community
Customizable

Starting with Bootstrap

Using bootstrap in a project is pretty easy, one just has to paste the links of CSS spreadsheet JS plugins like this.

Method 1: By using npm

Or you can use npm install bootstrap and link node_modules/bootstrap/dist/css/bootstrap.css inside head tag and node_module/bootstrap/dist/js/bootstrap.bundle.js inside script tag in your HTML file.

Method 2: By downloading
We have to download the code from the below website and link that CSS spreadsheet and js plugins in our HTML file like we do with our CSS and javascript code file.
Downloading link

Method 3: By using Links
Links are present in the above bootstrap documentation link.

Example

Below is the code which is the basic example to check if bootstrap is working or not.

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <title>Starting with Bootstrap</title>
</head>
<body>
     <h1>Started with Bootstrap</h1>

     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

</body>
</html>

The web page will have a different font style, which is the default font style in bootstrap.

In the next part, we will go through the grid system, buttons, cards, icons, forms, etc.

How modern web browser works

Sanskrati Jain — Tue, 28 Dec 2021 12:58:33 +0000

What is a Web Browser?

A web browser is simply an application for accessing WWW(world wide web). When a user requests web browser for a particular website, it does the necessary things and then displays the page.

This blog focuses on what are the necessary things that the browser does from looking the URL to displaying the page.

Some terms:

GPU:
Graphics Processing Unit is good at handling simple tasks but across multiple cores at the same level.

Process and Threads:
Process is simply an application's executing program. Whereas, threads lives inside the process and executes any part of it's process's program.

When we start an application, a process is created which can create threads to help. Operating system gives private memory to the process, which is released when the application is closed. A process can ask to spin-up another process for different task.

Browser Architecture

Web browser is built using process and threads. Different browser have different architecture. Here, I am taking the reference of Chrome browser. Browser contains different process for performing different tasks. Here is the list of some of those:

Process and what they do?

Browser: Controls address bar, bookmarks, back & forward buttons, network requests and file access.
Renderer: Controls everything inside tab.
Plugin: Controls plugins.
GPU: Handles GPU task in isolation. It is separated into different process because GPUs handles request from multiple apps and draw them in the same surface.

Except these there are more process. Like extension. But these are the major ones.

Some fun facts

Chrome have multipurpose architecture, which means that each tab has it's own renderer process. This makes multipurpose architecture more secure.
Since process have their own V'8 engine. Chrome puts a limit on memory. If one opens more tab then multiple tab runs on the same process.
If the machine is powerful then browser process will split each service into different process. This is also used in android.

Navigation

Navigation refers to, when a user requests a page and the browser prepares to display that page. This starts with browser process. When we type the url all the way to document loading phase. Here is a flowchart to explain every single things:

Link for the image

Renderer Process

After navigation the document loading phase begins, and the html, css and js starts converting into a page. This process is responsible for displaying the page.

Controls everything inside tab.
Main purpose to turn HTML, CSS and JS into web page.

Parsing

When the render process receives a commit message for a navigation and starts to receive HTML data, the main thread begins to parse the text string and turns into DOM.
Main thread loads external resources while building DOM but to speed up "preload scanner" peeks at tokens generated by HTML(img, link) parse and sends request to network threads.
If HTML parse finds script tag then, first JS is loaded, parsed and executed before continuing to HTML because JS can change the DOM.
Now style is loaded.
Layout is decided after this.
Decide what to display first (e.g z-index). For this main thread creates paint records. Paint records is a note of painting process like background first then the text.
Turning the information into pixels on the screen is called rasterizing. Old Method: If the user scrolls the page, then move the restered frame and fill the missing part. New Method: Composting, a technique to separate parts of page and rasterizing and composite as a page in separate thread.
In order to decide layer tree, main thread sees layout tree.
The compositor thread rasterize each layer and sends each tile off to raster threads (stores tile in GPU). Frame is then submitted to browser process. Then to GPU to display.

Now we can see the page. And this is how a website is loaded. There are many other things to browser like the security and each browser have different architecture so every browser handle things differently.

I really recommend to read this BLOG.

SASS - CSS with SuperPowers

Sanskrati Jain — Mon, 23 Aug 2021 20:53:51 +0000

Introduction

Sass (Syntactically awesome style sheets) is the CSS extension language that allows you to use things like variables, nested rules, inline imports and more. It helps to keep things organized and allow you to write CSS faster.

Setup

Install SASS
You can now write a SASS file, but you need to convert it to CSS file since the browser cannot read SASS.
To convert there are many ways:

Use command sass --watch input.scss output.css. Here input.scss is the sass file and output.css is the css file. --watch (watch flag) tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass.
We can also use sass --watch app/sass:public/stylesheets command. Here input directory and output directory is seperated by :. Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.
If you are using VS Code as a code editor. You can use Live Sass Compiler

Now when you create a file with .scss, you will see a Watch SASS at the lower left. Click on it and your Sass will be converted into css and will get save in the same folder.

Syntax

There are two syntax that SASS allows:

SCSS(Sassy CSS)

Similar to CSS(use curly braces and semicolons)
CSS is also valid
.scss extension

Sass(Syntactically awesome style sheets)

Use indentation
CSS code is not valid
.sass extension

Variables

You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable.

When Sass is converted into CSS the variable are not converted but the property is stored directly.

Maps

Maps in Sass hold pairs of keys and values, and make it easy to look up a value by its corresponding key.

Nesting

Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

In the above example ul is nested in class .nav

In the above image some more ways to nest are shown. & always refers to the upper selection.

Partials

You can create partials containing small snippets of css or sass. It can be very useful in maintaining large modules. A partial file is named leading underscore like _partial.scss. And it can be used in other file by @use rule or @import rule.

@use

The @use rule loads mixin, functions, and variables from other Sass stylesheets, and combines CSS from multiple stylesheets together. Stylesheets loaded by @use are called "modules". Sass also provides built-in modules with useful functions.

@import

Sass extends the @import rule is like @use. Unlike plain CSS imports, which require the browser to make multiple HTTP requests as it renders your page, Sass imports are handled entirely during compilation. This makes everything global.
Because of some properties of @import, using @use is more preferred

@mixin

It allows you to define style that can be used several times.

We can pass arguments in mixin that makes it customizable every single time we call. We can also set default argument value like in the example below.

@function

The features allow you to define complex operations on the Sass Script values which you can reuse throughout your stylesheet. They facilitate the abstraction of common formulas and behavior in a clear way. Like every other function syntax it follows the same.

In the above image we have created a sum function.

Although it is technically feasible for functions to have side effects like setting global variables, this is strongly discouraged. Use functions just to compute values and mixin for rest.

@extend

There are times when we have to use all the styles of another class and we have to add just some specific properties. This is the case when we use @extend.

Operators

We can also do some math operations using sass.

For performing operations the quantities must have same unit like px, rem or %.

All basic things are included. There are some other properties like @ error, @warn, @debug, @at-root, etc. But they are not used most of the times.

For more information read the official documentation or comment below.

Variables in JavaScript

Sanskrati Jain — Mon, 17 May 2021 17:46:24 +0000

JS variables are used to store data values. But unlike any other language, the datatypes of that variable are not declared first like in C++. JavaScript has dynamic types. This means that the same variable can be used to hold different data types,

var, let, and const:

To declare variables we use var, let, and const.
var and let are very similar except in block scope which is discussed in the difference between var and let.
cont is the same as let but used only for constants.

Difference Between var and let: The main difference between var and let is that scope of var is global while that of let is limited to block. This means if I declare a variable using var, it can be excessed anywhere except in the case of a function, where you can't excess a variable outside the function. This can be a problem if we use it in loops for example.

Properties of const : People usually misunderstood the cont. It does not define a constant value. It defines a constant reference to a value, which means we can actually change the properties of a constant object or the element of a constant array. It is just you can reassign a value.

String in C

Sanskrati Jain — Wed, 07 Apr 2021 14:44:30 +0000

What is a String?
A string is a 1-d character array terminated by a null(\0). The null character is used to denote string termination, characters are stored in contiguous memory locations.

How to initialize and print a string?
To initialize and print a string there are many ways like using pointers. Three methods that I am aware of to do this are mentioned in the image.