Medium Feed


Tuesday, August 23, 2022

ShadowDOM and rootDOM - Calculate the DOM max depth and width

An automated way to find the depth and width of shadowDOM/RootDOM

                                Find depth & width of shadowDOM / RootDOM

Heey Heeey stop stop stop !!!. What is DOM Depth( should I measure in cm?? ) what is DOM Width( does DOM gains weight ? )

The Shadow DOM allows hidden trees to be attached in the regular DOM tree. it starts with a shadow root, underneath we can have any number of element.

console.log(getDomStatus(document.body, true));// Includes shadowDOMThe sample result will be :
sample result from above function.

Sunday, April 24, 2022

Native web components vs Lit element: The key practical differences

LIT web component

Vanilla web component

Vanilla/native web components can be created by extending the native HTMLElement class and registering to the browser by calling customElements.define API.

As we know, we can achieve a custom web component from either a vanilla web component or a LIT-based component. But below are key features highlights which approach makes a developer’s life easier, and produce less code, easy maintenance, and better performance.

Vanilla Web component => Imperative
Lit Element => Declarative

 Rendering Template

Vanilla Web Component => JS InnerHtml binding Or <template> cloning nodesLit Element => Lit Template (Tagged Template Literals functions)
Vanilla Web Component => constructor, connectedCallback disconnectedCallback, attributeChangedCallback, adoptedCallbackLit Element => Lit introduces a set of render lifecycle callback methods on top of the native Web Component callbacks
Vanilla Web Component => Normal CSS stylesheet Lit Element => Constructable stylesheet
Vanilla Web Component => Yes, SupportedLit Element => Yes, supported
Vanilla Web Component => Achieved by getter / setter propertiesLit Element => Lit handles it as part of reactive lifecycle
Vanilla Web Component => Achieved with attributedChangedCallbackLit Element => Lit handles it as part reactive lifecycle
Vanilla Web Component => Event listener needs to be initialized programmatically in the connectedCallback and diconnectedCallback lifecycle.Lit Element => In lit templates supports adding event listener to node with @EVENT_NAME binding syntax.

Thursday, February 17, 2022

React/Redux hooks Vs equivalent implementation in React class feature

I am writing this article as an attempt to challenge myself to do a deep dive comparison between react/redux hooks used in functional component vs the equivalent implementation in react class component.

Note: I could not find equivalent class feature implementation for all the hooks. But I tried to the maximum which I can.

In this article, we will discuss the below list of mapping b/w react & redux hooks and it is equivalent implementation in class components. 

                                        React and Redux hooks Vs class feature mappings

useState hook Vs equivalent implementation in class Component

useEffect hook Vs equivalent implementation in class component

useRef hook Vs equivalent implementation in class Component

useMemo hook Vs equivalent implementation in class component

useSelector redux hook Vs redux Connect (mapStateToProps)

useDispatch redux hook Vs redux Connect(mapDispatchToProps)