DEV Community: Tether

Need of package.lock.json ?and npm clean install

Tether — Tue, 10 May 2022 19:14:15 +0000

You might have come across package.json and package.lock.json while working with node package modules or in yarn as yarn.lock in your React or node application; but why do we need them ?

Background

Basically package.json acts as a manifest file for all the multiple packages to be installed, it keep version tree of the dependencies including child dependency.It consist of dependency with version semantics, scripts and browserlist.

package.lock.json constains list of exact version of all packages used in your project, it is needed for locking the dependency of installed version.

What does npm install does underhood

npm install -s MODULE_NAME

It will first search the module by name.
Install the package modules and dependency.
update or create package.lock.json and added the corresponding package name and version in package.json

So if someone now clones your project and runs npm install command, the node package manager will ensure that it downloads the same file as it did previously by referring the version in lock.json and package.json but it will be comparing both and if they do match it will follow lock file, but what if they don't ? then npm will take manifest of package.json as authorized and update the package.lock.json

You might also need to know about package.json semantics versioning:

Generally npm package version look like 1.0.1 wherein first number from right is the patch version, then second number is for minor version and last is major version.

Patch release consist of bugs resolved to a feature or backward compatibility bug fixes and the patch version semantic: ~1.0.x
Minor release is when a new feature is added and it should have backward compatibility and the minor version semantic : ^1.x or ^1.1.3
Major release is when feature that can break backward compatibility and major version semantic : * or x.

So now lets come back to npm install updating lock.json, some developers have tendency to changing dependencies by hand or let assume a case in your project wherein you update a package dependency and only commit the package.json and not the lock.json and in mean while some deveoper clones your repository.....

Entry of npm clean install

npm clean-install

npm ci bypasses the packages of package.json to install modules from refering lockfile. This ensures reproducible builds—you are getting exactly what you expect on every install.

Previously, developers who wanted to ensure that node_modules/ and package.json stayed in sync would have to archive their node_modules folder. npm ci replaces this process with a single command.

What steps does it take

If node_modules fodler exist, it will delete and install a fresh one
If lock.json doesn't exist or doesn't match the version with package.json, it will give an error and stop.

Npm CI in some cases is faster and it improves readibility
check this github

Conclusion:

Next time you clone a repository use npm clean install to avoid any version compatibility issue.
Never try to update package.json by hand.

Prototype and Prototypical Inheritance

Tether — Tue, 10 May 2022 15:07:08 +0000

Whenever we create an object the Javascript engine automatically attaches your object with hidden properties and functions, the object is accessed via proto within every object that points out (references) the prototype that has been set for that object.

We can access the properties of the object through the dot operator and can use this property or even update the existing properties

, and with function when we create a function in JavaScript, the JS engine adds an extra property called prototype to the created function. This prototype property is an object (called a prototype object) that has a constructor property referenced to it by default and inside the prototype property, you will get access to proto object.

In JavaScript, any function can be attached to an object in the form of a property. An inherited function acts just like any other property and when an inherited function is executed, the value of this points to the inheriting object, not to the prototype object where the function is an own property.

All objects in javascript are references to an object and that object has a prototype of its own and this chain goes on till it is referenced to a null

We can get and set propertytype by Object.getPrototypeOf() and Object.setPrototypeOf(), as well as with non standard proto property. While modifying a prototype you might even come across warnings like

This is because when navigating through a property object, we basically hop from an object to its [[prototype ]] then its object [[prototype]] until we reach the end of the chain to null. In ES6, there were ways introduced to mutate [[prototype] but they harm the performance in all modern javascript engines. When you set proto, we reduce the future optimizations from Ion on that object, but you also force the engine to go crawling around to all the other pieces of type inference, which involves further deoptimization.

Changing the prototype of an object in the middle of execution is really not a good practice and cause huge performance issue.

Must Read blogs

Tether — Sat, 07 May 2022 02:09:08 +0000

Just a bunch of really great blog collection
I am trying to make a blog for collection of blog or docs which i would recommend to read

1) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

2) https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_version/

JavaScript Interview questions

Tether — Tue, 26 Apr 2022 02:50:25 +0000

The blog is regarding popular and unique interview question which I come across during interview or from other candidates.
This might include tech stack of web dev related to Vanilla Javascript majourly and also include React js, Node js, TypeScript, Angular, HTML and CSS

Lets go!!!

-> Java Script
1) Event bubbling and event capturing and event delegation
sol: Event delegation refers to the process of using event
propagation (bubbling) to handle events at a higher level
in the DOM than the element on which the event originated

2) Function Borrowing => call , apply, bind => create your own call, apply, bind prototype
3) Create your own map in js
4) strict mode
5) inspect tab
6) create your own Flat method
7) Object.is() vs === vs ==
8) type of Nan and Number.Nan

-> React js
1) control component and uncontrol components
2) create your own custom hook
3) diff usememo , usecallback and memo
4) side effect in react
5) React Virtualisation
6) React fiber
7) diffing reconcilation
8) useref and memoisation
9) bundle.js
10) suspense , server render

-> CSS
1) Create elipsis (Hi i am ...)
2) Create a Clock with js and css like actual non digital clocks with minutes and hour hand ticking

Tech Hacks discovered dailly

Tether — Thu, 21 Apr 2022 04:35:19 +0000

List of all Tech hacks I find dailly while reading a blog or while reviewing code of peers.

Mostly will be related JavaScript, React JS, Node JS, Angular, TypeScript, GIT , HTML and CSS

Just making a list:

1) axios setting deafault header for all request
axios.defaults.headers.common["authorization"] = encodedToken;

2) Function Declarations get Hoisted to Top of the context, where as classes declarations and function Expressions are not Hoisted.

3) Way to round a number

x = -3.45
console.log(~~x) // -3
console.log(x | 0) // -3
console.log(x << 0) // -3

4)How JS can find an element in a Map object in one step?

Map uses a hashtable (or a similar mechanism) as specified in the spec. Therefore, when an object is requested a hash is calculated. Then the specific location in an internal table is located. This is the basic theory about hash tables and why they are usualy O(1). Do note, that if there are many collisions performance can move towards O(N).

5)
The CSS @import directive has a major drawback due to performance issues; it creates an extra HTTP request each time you call it. However, the Sass @import directive includes the file in the CSS; so no extra HTTP call is required at runtime!

6) which is faster ifelse or switch in js
Compiler is better in optimizing switch-statement then if-else because of the order of evaluation in if is not stacked based on importance but in switch it knows the clause to be evaluated together and with more efficient order.
-> Stats http://www.blackwasp.co.uk/speedtestifelseswitch.aspx

7) Object.is() vs ===
Object.is it for comparing 2 values and default is true
null and null
undefined and undefined
are equal
but in non primitive data type if not referencing to same instance in memory then not not equal like
Object.is({},{}) or Object.is([],[])

but then what is the difference between === and Object.is()
the difference is signed 0 and Nan
so
a) Object.is(NaN,Nan) => true
NaN === NaN => false
b) Object.is(NaN,0/0) => true
NaN === 0/0 => false
c) Object.is(NaN,Number.NaN) => true
NaN === Number.Nan => false