Forem: Kapil Pandey

What is JavaScript?

Kapil Pandey — Mon, 17 Aug 2020 16:07:05 +0000

JavaScript created by Brendan Eich, originally known as LiveScript, which due to the popularity of Java at that era got rename to JavaScript is a dynamic, weakly typed language that gets compiled at runtime.

Got no clue what the heck those words stand for? Don't worry because that's what this series is all about. So let's get into a time machine and go back to the era when JS(short-hand for JavaScript that will be used in the entire series) was introduced.

History of JS

The language was created to allow web developers to embed executable code on their webpages so that they could make their webpages interactive, or perform simple tasks. Today, browser scripting remains the main use-case of JavaScript.

Java v/s JavaScript

JavaScript is an interpreted language, not a compiled language.
A program such as C++ or Java needs to be compiled before it is run. The source code is passed through a program called a compiler, which translates it into bytecode that the machine understands and can execute.
In contrast, JavaScript has no compilation step. Instead, an interpreter in the browser reads over the JavaScript code, interprets each line, and runs it.
More modern browsers use a technology known as Just-In-Time (JIT) compilation, which compiles JavaScript to executable bytecode just as it is about to run.
Js is dynamic, Java is static (Explained below)
Both languages have different runtime environments, different governing bodies, different libraries.

dynamic, weakly typed

So let's understand what these two terms in the definition of JS really stand for:

Dynamic and weakly-typed language: In any programming language we have a process known as type checking, which is just looking at variables and their types and then saying does this expression make sense. A dynamic programming language is a programming language in which operations otherwise done at compile-time are done at run-time. This can be clearly understood by an example below. In Java, we declare variables as shown below:

int a=10; //declare & define Integer type variable
String s="Kapil"; //declare & define String type variable

and they get memory allocated during compile-time and we cannot do int a="Kapil"; String s=10 as it is static and strongly typed and once a type is assigned to a variable it retains that type and can’t be intermingled in expressions with other types

Whereas in JS we can simply intermingle variables like

var a=10 //declare & define a variable
a="Kapil" //variable a can store any value

because it is dynamic and weakly typed.

In simple terms

Static = Precompiled and code does not change at runtime
Dynamic = Parsed and compiled on the fly, not precompiled.
Strong = Predefined/fixed variable types i.e String, int, char, float, double, boolean, etc, and variables types are not interchangeable.
Weak = Datatypes are assumed automatically, not predefined and can assign any value to a variable

That it for this post and I hope it may have helped you get a brief insight of what technically JavaScript is. It was more technically because I can guess you are a techie, as you are here to learn about JS 😉

Stay tuned and let me know how often would you like to read blogs on this series in the comments below.

[Solved] “Treating warnings as errors because of process.env.CI = true”

Kapil Pandey — Thu, 23 Jul 2020 15:10:03 +0000

Did deploying your code to netlify failed and in logs you are getting
Treating warnings as errors because of process.env.CI = true

If yes then you are at the right place. I'll help you fix this error within seconds. Before showing you the fix let's first have a glance at the root cause of this error.

What is this error all about?

Beginning on June 15, 2020, Netlify started a gradual rollout of adding the environment variable CI to build environments, with the value of true. This environment variable, short for Continuous Integration, is commonly set in various CI environments like Travis CI and Github Actions, among many others. The ecosystem has largely agreed to use this environment setting to detect when a build is executing in a CI environment, as opposed to a local development environment.

This setting allows many common libraries to detect a CI environment and change behavior accordingly. One such behavior is the disabling of progress “spinners” that while useful in a local development terminal, can render poorly when operating in a log streamed CI environment.

Because of this some libraries now interpret what were previously just warnings as hard errors and halt the build. The intention is that developers should not ship potentially broken configurations, but the downside is that builds that successfully completed previously started failing after this change.

The fix

If your build is breaking after this change, you can disable this behavior by unsetting the CI variable in your build. For example, the following will unset CI for the NPM command:
CI= npm run build

Log in to Netlify
Choose your app and click on Site settings
Navigate to Build & Deploy
Under Continuous Deployment select Edit settings
Update Build command to ```

CI= npm run build
or
CI=false npm run build //OP mentioned below in comments


If you are using `netlify.toml` to set the build command, update it as such:

...
command = "CI= npm run build"
...

*Rebuild you deployment
Now you should see `Production: master@c215c12 Published` 😉

How to fix Page Not Found on netlify

Kapil Pandey — Sun, 19 Jul 2020 12:28:16 +0000

Since you are reading this, you surely might have came across the same error as shown in the cover image.

I'm not sure if other static site servers/platforms are all like that, but if you deploy SPA to Netlify you can only navigate from index.html to other pages using Links.Once you refresh or type a URL directly in the address bar you'll get 404.

Why does this error occur?

If your SPA is build with React then React Router handles routing on the client side (browser) when you visit internal page (e.g. http://localhost:3000/about) but once you host your SPA on Netlify (server-side) the routing logic has to be modified because Netlify does not know how to handle the route.

How to fix the issue?

As per the doc, you need to create a file named _redirects in the root folder.You can go to the link mentioned above to know more about it.I'll directly show how to fix it:

Create a file named _redirects without any extension inside public folder.
Copy paste the below content in the file

/*    /index.html   200

Push your code and redeploy

Cheers 🥂 you fixed the broken link!

Adding Profile page to Github using README.md

Kapil Pandey — Sun, 19 Jul 2020 04:27:57 +0000

GitHub rolled out a new feature that allow users to create a profile that is visible in users Github home page using a README file.Here's how you can access this feature:

1. Creating a new repository
Create a new repo but keep in mind:

Repo name should exactly be same as your user name.
Repo must be public
Last but not the least don't forget to initialize the README

2. Edit the README.md file inside the new repo and add some content (text, GIFs, images, emojis, etc.).

3. Commit your awesome looking README!

4. Push: Finally don't forget to push your changes(if made locally).

Here are some of the creative profiles: