DEV Community: Dushyant Pathak

Damn Docker don't fire up on Windows? Here's a shortcut

Dushyant Pathak — Fri, 25 Dec 2020 11:55:21 +0000

If you see a dizzyingly dismal error like this when you fire up Docker Desktop

docker: error during connect: Post http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.40/containers/create: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuration on Windows, the docker client must be run elevated to connect. This error may also indicate that the docker daemon is not running.
See 'docker run --help'.

you're not the first one.

And unfortunately, a lot of Stack Overflow answers don't work. Here's something that worked for me on Windows 10.

Open Powershell as Administrator
Run -

PS C:\WINDOWS\system32>cd "C:\Program Files\Docker\Docker"
PS C:\WINDOWS\system32>./DockerCli.exe -SwitchDaemon

Remember, make sure you spell the stuff right, and that Docker is installed in the directory as mentioned in the command.

This is just meant to be a quick hack - an explanation about what happens coming soon.

CORS error hack

Dushyant Pathak — Sat, 06 Jun 2020 05:59:35 +0000

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

An example of a cross-origin request: the front-end JavaScript code served from https://a.com uses XMLHttpRequest to make a request for https://b.com/data.json.

More details on CORS can be found here.

Most noobs, who are starting with Back-End development, will often see this error.

The first step would be to use the CORS package, when working with NPM.

//Install
npm i cors

//In index.js file,
var cors = require('cors');
app.use('cors');

Some deployments may still cause the CORS error in some cases, wherein this particular Chrome extension comes handy.

CORS Extension

You just have to Enable and save, and it should solve the CORS error for you.

However, do note that some sites, usually third party API services, such as Newsapi restrict only localhost sites to be able to access their free plan APIs, and will block access requests from deployed websites.

Cheers! Have a CORS-Free day!

Teach state to a 5 year old

Dushyant Pathak — Fri, 05 Jun 2020 11:21:17 +0000

State is an often tricky concept for noobs, and here is an attempt to simplify it through a real life example.

State is a snapshot of how things were at a particular point of time. In a web page. Period.

The background might have been blue, the variable hello might have had the value 10, the array might have had 15 elements. All these are part of state at a particular time.

Let's say we have to make a simple counter app, which can just increment and decrement a number on the screen. The click of a particular button will increment, and the other will decrement.

Everytime any of the buttons is clicked, the state of the number visible on the screen changes, and the same is reflected on the screen.

Similarly, an event happening can also be a state change, such as the change in window size of the browser.

State management is complex because changing state the incorrect way can lead to unexpected results, and is often very hard to debug, since there is no actual syntactic error.

Angular uses libraries like NgRX for state management, and React uses Redux.

Mutating state means to make changes to the existent state, and it is good practice in React to not modify state directly, as it leads to unexpected views. More info here.)

Cheers! Happy coding

Deleting a node in a Linked list, when you have access to only that node.

Dushyant Pathak — Tue, 02 Jun 2020 19:02:31 +0000

Deleting a node in a Linked list is a standard problem, until you are given the root of the LL, and the node that you want to delete. What if you want to delete that node?

Thought process:
Deleting a node requires a knowledge of the node before, to set the correct next link, and is not possible otherwise. So, how do we get a link to the node before?

Well, we have a link to the node, and we have a link to the next node. So, we can delete the next node. So, let's just shift the value of the next node here, and delete the next node!

del(Node* node)
{
    // Shifting the value
    node->val = node->next->val;
    // Removing the next node from the LL
    node->next = node->next->next;
}

Thus, although it is the next node that has been kicked out of the Linked List, the value of the node that was to actually be deleted no longer exists! So, this works, as long as you are not asked to delete the actual node!

Happy coding!

Quick way to make an image responsive

Dushyant Pathak — Sat, 30 May 2020 12:19:45 +0000

Add the following to your image's style attribute.

<img style = "width: 100%; height: auto;" src = "some-image-source">

If you want to set a max-width,

<img style = "width: 100%; height: auto; max-width: 200px;" src = "some-image-source">

Cheers! Happy coding!

Solving Typescript-TensorflowJS incompat issues

Dushyant Pathak — Sat, 30 May 2020 06:46:58 +0000

If you're trying to use Tensorflow.js with Angular, which uses Typescript, you might run into an error that looks something like this.

node_modules/@types/webgl2/index.d.ts:582:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'WebGL2RenderingContext' must be of type '{ new (): WebGL2RenderingContext; prototype: WebGL2RenderingContext; readonly ACTIVE_ATTRIBUTES: number; readonly ACTIVE_TEXTURE: number; readonly ACTIVE_UNIFORMS: number; readonly ALIASED_LINE_WIDTH_RANGE: number; ... 554 more ...; readonly WAIT_FAILED: number; }', but here has type '{ new (): WebGL2RenderingContext; prototype: WebGL2RenderingContext; readonly ACTIVE_ATTRIBUTES: number; readonly ACTIVE_TEXTURE: number; readonly ACTIVE_UNIFORMS: number; readonly ALIASED_LINE_WIDTH_RANGE: number; ... 555 more ...; readonly MAX_CLIENT_WAIT_TIMEOUT_WEBGL: number; }'.

582 declare var WebGL2RenderingContext: {
                ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:16450:13
    16450 declare var WebGL2RenderingContext: {
                      ~~~~~~~~~~~~~~~~~~~~~~

This is a compatibility issue between the existing version of WebGL2(0.0.4) and Typescript 3.6.

To solve this, just type

npm i --save @types/webgl2

and rerun the application.

TF.js should now work without a glitch.

Cheers! Happy coding

Making Google Charts responsive

Dushyant Pathak — Sat, 30 May 2020 04:59:31 +0000

I used the npm package for google charts, called angular-google-charts, to display charts in my Angular app.

Setting the width and height as percentages does not make the graph responsive. Moreover, wrapping the chart element in a div and making that div responsive also doesn't work.

Here's a hack I developed to make it work.

<!--mycomponent.component.html file -->
<!-- This is the container element of your chart-->
<div (window:resize) = "resetWindowSize($event)">
    <google-chart>
    ....
    </google-chart>
</div>

This is an event listener that will listen for changes to window size, and on an event capture, will call the resetWindowSize() function.

//mycomponent.component.ts file
//setting state variables for chart parameters


width = document.documentElement.ClientWidth;
height = document.documentElement.ClientHeight;
....
resetWindowSize(event){
    //Reset the width and height based on current window size
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
    makeGraph();
}

Thus, on changing window size, the resetWindowSize function is triggered, and sets the width and height based on the current window size.

Note that you might have to re-call the function that makes the graph. That's the way it works for me.

Cheers! Happy Coding

PrimeNG setup

Dushyant Pathak — Wed, 27 May 2020 03:04:50 +0000

PrimeNG is a UI library for Angular. It has a list of components that we can use in our Angular applications.

A lot of devies get this error when they try to add PrimeNG:

p-card is not a known Angular component

Note here, that p-card is just an example, and the error could be for any PrimeNG component one might be using. To solve that, make sure you have followed ALL the following steps:

Installing the packages.

npm install primeng --save
npm install primeicons --save

Make sure the following dependencies are added in the package.json file:


"dependencies": {
  //...
  "primeng": "^8.0.0",
  "primeicons": "^2.0.0"
},

Import the necessary modules in the app.module.ts file.

import {CardModule} from 'primeng/card';   
import {MenuItem} from 'primeng/api';

In the imports below, add the corresponding module.

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,

If you still get the same error, add this to the angular.json file, in the styles:

"styles": [
  "node_modules/primeicons/primeicons.css",
  "node_modules/primeng/resources/themes/nova-light/theme.css",
  "node_modules/primeng/resources/primeng.min.css",
  //...
],

This should do the job!

Cheers! Happy coding!

Netlify reload 404 error resolved

Dushyant Pathak — Mon, 25 May 2020 17:50:58 +0000

Netlify is a popular website that can be used to host your websites/web apps.

However, here is a possible error that you might see when you happen to reload your netlify page.

Here's an easy hack:

Go to the folder which is published to netlify.
Create a new file called netlify.toml.
Copy and paste the following code:

[[redirects]]
from = "/*"
to = "/index.html"
status = 200

Note here, it doesn't matter if you don't have an index.html page in your web app. This just works.

Cheers, and happy coding.