DEV Community: WebDev

Linked List Cycles

WebDev — Mon, 08 Aug 2022 00:24:34 +0000

Instructions
Describe a function that can detect the presence of loops in a Linked List. Rather than writing an actual function, describe the strategy you would employ.

Input: Linked List
Output: Boolean

Hints
• From JS Data Structures: Linked List (https://codeburst.io/js-data- structures-linked-list-3ed4d63e6571):

A Linked List is an ordered, linear structure, similar to an array. Instead of items being placed at indices, however, they are connected through a chain of references, with each item containing a reference to the next item.

Solution1

How it Works
We can keep track of every single node we come across by throwing it into an object. As we go through each node in the linked list, we check our object for its presence. If present, we know we’ve come across it before, indicating a circular list.

Time
The time complexity of this would be: O(n)

Space
The space complexity is also:

O(n),
as we have to store potentially every value in the list.

Challenge
Make this function have O(1) space complexity.

Solution 2

How it Works
We create two counters which both start at the beginning of the list. They advance forward. The first advances one node at a time and the second advances two nodes at a time.
If there is a null node anywhere, signifying the end of the list, we can return false . Otherwise, the two counters will eventually fall on the same node. If the fast and slow pointer ever converge, this verifies a circle in the list, allowing us to return true.

Time
The time complexity is:

O(n).
If the list isn’t circular, we simply wait for the fast pointer to get to the end. It
has to traverse half the nodes, sD time complexity is o(n)

If the list is circular, the slow and fast pointer will always find each other by
the time the slow pointer has reached the end of the list.

Space
0(1),

since we don’t store any of the nodes.

How to add 5 seconds delay without locking up UI using ES6 async/await

WebDev — Sun, 24 Jul 2022 18:27:08 +0000

You will need to promisify sleep function manually.

function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}
async function sleep(fn, ...args) {
    await timeout(3000);
    return fn(...args);
}

Btw, to slow down your loop you probably don't want to use a sleep function that takes a callback and defers it like this:

while (goOn) {
  // other code
  var [parents] = await Promise.all([
      fn(...args).then(
        //code here
      ),
      timeout(5000)
  ]);
  // other code
}

Deep Equals

WebDev — Mon, 18 Jul 2022 01:07:27 +0000

Instructions

Write a function that will take in two items of any type. The function should perform a deep equality

Inputs: Any, Any Output: Boolean

Solution
This problem has several parts. Let’s walk through it logically.

comparing NaN with NaN using -- or --- will always return false. Because of this, we need to start by checking if both inputs are NaN.
If the items are of a different type, we can immediately return false.
If they’re the same type and not objects, we can return the result of a simple equality operation using ===. We have to be careful to include null here, as typeof null returns object. This is due to a bug in JavaScript (http://2£tlity.cDm/2013/10/typeof-null.html) itself.
We need to be careful to ensure that both objects have the same number of properties. If they don’t, return false.
Now we need to go through every key and make sure they’re the same on every object. To do this, we can loop through the first object and check to make sure that the second object has matching values.
If all checks have passed, return true

Let’s transform that pseudocode into code.

function deepEquals(a, b) {
  if(Number.isNaN(a) && Number.isNaN(b)) {
    return true;
  }

  if(typeof a !== typeof b) {
    return false;
  }

  if(typeof a !== 'object' || a === null || b === null) {
    return a === b;
  }

  if(Object.keys(a).length !== Object.keys(b).length) {
    return false;
  }

  for(const key in a) {
    if(!deepEqualS(a[key], b[key])) {
     return false;
    }
  } 

  return true;
}

Time

Our function has to go through and process every property of both items. Assuming that the two inputs are deeply equivalent, we can say that the time complexity is:

0(n).

Space
This is a recursive function and the number of calls will generally scale with the objects’ sizes, so:

0(n).

Create a Queue Using One Stack

WebDev — Mon, 11 Jul 2022 00:12:27 +0000

Recently, Google revealed that they have asked applicants to construct a queue using only a single stack.
This might seem impossible, but it’s doable, using some trickery. Feel free to try it yourself.

Hints
This won’t have nice time complexities.
Think about how you might be able to store information without using an array or an object.

class Queue {   
  constructor() {   
  this._storage = [];
    // Your code    here

  enqueue(Item)  (  
      // Your  code here
  } 

  dequeue() (   
    // Your code    here
  } 

  get  size()  (    
    // Your  code   here
  } 
}

Solution

class Queue {
  constructor() {
    this._storage = [];
  }

  enqueue(...items) {
    this._storage.push(...items);
  }

  dequeue() {
    if(this._storage.length > 1) {
      const lastltem = this._storage.pop();
      const firstItem = this.dequeue();
      this.enqueue(lastltem);
      return firstItem;
    } else if(this._storage.length === 1) {
      return this._storage.pop();
    } else {
      console.warn('Attempt1ng to dequeue from an  empty  queue');
    }
  }
}

Note that in the constructor, we create only a single array. This Will be our stack.
The enqueue() function passes the items it receives into storage.

How dequeue() Works

This recursive method is the fun part. We’ll start by discussing the base cases. Lines 16 onward state that if the queue is empty, print a warning and do nothing. If there’s a single item, pop it off and return it.

For the cases where there is more than one item present in storage, we can look at lines 11 - 15.

Assume that our storage stack has values 1, 2, 3, in that order, present inside.

In the First Call

Once we hit line 12, lastItem is equal to 3 and our queue has had 3
removed:
[1, 2]

Since we know more items are present (since this is the case in which there were multiple items in storage), we recursively call the dequeue() method.

Entering the Second Call

We enter the function again. Length is now 2, so we enter the same case, lines 11 - 15. Again, we dequeue. In this Call, lastItem is equal to 2 . Our queue loses another value:
[1]

We again call the function.

Entering the Third Call

This time, there is only one item, 1 . We pop it off and return it, ending up back in the second call. Our queue is empty.
[]

Back to the Second Call

We go back to the 2nd call, now on line 14. lastItem is 2 and firstItem is 1.

On line 14, we enqueue lastItem, or 2.
[2]

We return 1 and go back to the first call.

Back to the First Call

We’re back at the beginning. 1astItem is 3 and firstItem İs 1. We enqueue 3:
[2, 3]

and return 1.

Dequeue Time

The time complexity of dequeue() is:

O(n)

because we need to pop and re-insert every item except one.

Dequeue Space

The space complexity of dequeue() is:

0(n)

because we need to call the func

tion one more time for every item.

Docker image layer

WebDev — Sun, 26 Jun 2022 02:03:12 +0000

Firstly, we need to understand about the docker image.

What is a Docker image?
A Docker image is a file used to execute code in a Docker container. Docker images act as a set of instructions to build a Docker container, like a template. Docker images also act as the starting point when using Docker. An image is comparable to a snapshot in virtual machine (VM) environments.
Docker is used to create, run and deploy applications in containers. A Docker image contains application code, libraries, tools, dependencies and other files needed to make an application run. When a user runs an image, it can become one or many instances of a container.

What is Docker image layer?
Docker images have multiple layers, each one originates from the previous layer but is different from it. The layers speed up Docker builds while increasing reusability and decreasing disk use. Image layers are also read-only files. Once a container is created, a writable layer is added on top of the unchangeable images, allowing a user to make changes.
If you have a tagged image pointing to a chain of 5 images built on each other, that tagged image has 5 layers, or 5 (or 4? depending on how you see it) intermediate images if you prefer that notion.
The following instructions create a layer: RUN, COPY, ADD.
The other instructions will create intermediate layers and do not influence the size of your image.

Pros and Cons of Server Side Rendering

WebDev — Sat, 18 Jun 2022 13:17:40 +0000

Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client. Search engines can crawl and index content prior to delivery, which is beneficial for Search Engine Optimization purposes.

Some server-side rendering advantages include:

A server-side rendered application enables pages to load faster, improving the user experience.
When rendering server-side, search engines can easily index and crawl content because the content can be rendered before the page is loaded, which is ideal for SEO.
Webpages are correctly indexed because web browsers prioritize web pages with faster load times.
Rendering server-side helps efficiently load webpages for users with slow internet connection or outdated devices.

Server-side rendering disadvantages may include:

Rendering server-side can be costly and resource-intensive as it is not the default for JavaScript websites, and the server takes on the full burden of rendering content for users and bots.
While rendering static HTML server-side is efficient, rendering bigger, more complex applications server-side can increase load times due to the bottleneck.
Server-side rendering may not be compatible with third-party JavaScript code.
Rendering server-side may be ideal for static site generation, but frequent server requests and full page reloads can result in overall slower page rendering in more complex applications.

Why is Accessibility important for front-end developers?

WebDev — Sat, 11 Jun 2022 10:39:01 +0000

As a front-end developer who has some experience with Accessibility, I tried to understand why Accessibility is important for our front-end developers.

What is Web Accessibility?
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.
Web accessibility also benefits people without disabilities - ones using mobile phones and smart TVs like the devices with small screens, older ones, ones using slow internet connection, etc.
Why is it important for the front-end developers?
In one word, Accessibility can positively impact SEO.
Across the world, 15% of people are living with a disability. That’s a large number! In fact, it’s 1 billion people. Accessible websites help people with disabilities to access and use digital content. It improves their user experience, and can make them feel more welcomed by your brand.
Web accessibility makes a huge impact in the online experiences of many.
There’s a considerable overlap between features that improve accessibility and SEO performance. By making your web pages accessible to everyone, you’re also boosting your chances of being found in search.
What can you do as a front end developer to keep your site accessible?

Use semantic html, and use it properly Don’t use divs to build all of your layouts, instead consider using semantic html. Some of the big ones are: nav to build your navigation, use footer to build your footer, use section to wrap blocks on content, and use article to wrap articles.
Use chrome’s built in accessibility tools
Install the axe chrome extension
Run lighthouse audits for accessibility on code changes.

Who has rich experience in Accessibility and What is your opinion?

Have you ever dealt with the performance problems on front end and how did you fix it?

WebDev — Mon, 06 Jun 2022 02:41:16 +0000

I have dealt with performance problems while working on a specific project.
It is a large-scale startup project based on React.js library.
As the project scale grew, the loading and action reacting speed became slow and it laid out a very important problem for releasing the project.
Firstly, I focused on refactoring the code for fixing the unnecessary rendering of components.
So I made useEffect hooks to separate to have the only necessary dependencies and made the components to PureComponents as possible.
Next, I reduced the bundle size of the project using the webpack bundle analyzer plugin.
Finally, the speed was improved by 70%.

Have you had the other experience related with performance problem?

State management in React

WebDev — Sat, 28 May 2022 03:20:11 +0000

State management is one of the most important aspects of every app.
In a nutshell, it is a way to communicate and share the data across components
The app’s state dictates what users see, how the app looks, what data is stored, and so on.
There are four main types of state you need to properly manage in React app.

Local state
Local state is data we manage in one or another component.
It is most often managed in React using the useState hook.
Global state
Global state is data we manage across multiple components.
There are the recommended libraries like Redux, Recoil, Jotai, Rematch, Zustand, Hookstate and in small to medium apps, we can use Context API for state management.
Server state
Server state is data that comes from an external server that must be integrated with our UI state.
There are tools such as React Query and SWR that make managing server state much easier.
URL state
Data that exists on our URLs, including the pathname and query parameters.
If you are using React Router, you can get all the information you need using useHistory or useLocation.
Additionally, if you have any route parameters that you need to use, for example to fetch data based off of, you can use the useParams hook.
If you are using Next.js, almost everything can access directly from calling useRouter.

Let's say about Search engine optimization.

WebDev — Sat, 21 May 2022 02:54:01 +0000

SEO stands for Search Engine Optimization and is the process used to optimize a website's technical configuration, content relevance and link popularity so its pages can become easily findable, more relevant and popular towards user search queries , and as a consequence, search engines rank them better.

Why is SEO important?

SEO is important because it makes your website more visible, and that means more traffic and more opportunities to convert prospects into customers.

SEO Basics

Content

Finding the result that serves their needs in the best way is very important in SEO.
You need to create high-quality, intent and freshness content

Keyword Research and Selection

Keywords determine how you build links, including everything from the tactics you choose to how you plan on implementing them.

HTML

Your site's HTML is an important piece of the SEO marketing puzzle.
You need to implement Title tags, Meta Description, Schema, Subheadings, Alt Text, URL Slug well

Site Architecture

A good website architecture leads to a great user experience, which is important for SEO marketing

Page Speed

If your site loads too slow or certain elements load slowly, Google may penalize you or make it more difficult for you to outrank your competition.

HTTPS and SSL

Security and safety are the important ranking factors. If Google thinks your site is spammy or sketchy, it’s not going to give you a first-page ranking.