There are actually 2 ways for javascript to work in browsers. One way is it load using script tag or using inline script tag. The problem with this is that it doesn’t scale and too many scripts through script tag or html. Browsers have a max number of default simultaneous persistent connections per server. Like […]

CSS Grids are a way to layout/markup websites. It has much flexibility compared to a framework like Bootstrap. It makes your markup a lot simple and has good web support grid-template-columns above defines a 3 column layout ( first & last element 100px wide ) and the middle element takes up the remaining space. ) […]

We can make a container as flexbox using property Flexbox container always has a direction. On the web, this always defaults to the main-axis being left to right (horizontally) and cross-axis being top to bottom ( vertically ). To position elements in the horizontal axis, To position each element in the horizontal axis, We can […]

transition property Customizing transitions Animations First, we define the animation keyframes. we can use ‘from’ and ‘to’ or in percentages. ‘from’ equivalent to 0% and ‘to’ is equivalent to 100%. On the element, define animation-* properties Transforms Translate Timing Function Cubic bezier timing function We can customize our animation/timing function by using Cubix bezier. It […]

In tests, we Arrange, Act, and Assert! Configuring Jest in react applications By default Jest actually loads JSDOM. ( so, we have access to window object in tests ) – We can add configuration for Jest if we don’t require JSDOM ( access to the window ). This can be done by adding ‘jest-environment-node’ / […]

Patterns to enhance the flexibility and simplicity of both your components and implementations Compound Components In React, we can build compound components like below. We get flexibility in the order of how components are rendered. Toggle.Button is responsible for render the button. Toggle.On for the text when the state of the button is ‘on’ etc. […]

Akamai found that 2 second delay in web page load time increase bounce rates by 103 percent A 400 ms imporvement in performance resulted in a 9% traffic at Yahoo! 100ms improvement in performance results in 1% increase in overall revenue at Amazon 53% of users will leave a mobile site if it takes more […]

Browsers are running single threads in the treatment of generating your page and actions on the front end. computationally expensive javascript can result in unresponsive UI. Web workers help us solve this problem by offloading the computationally expensive job in a separate thread from the main UI. Services workers cannot access DOM, because it is […]

The async and defer attributes can be added to instruct the browser to load a referenced javascript file in parallel while the HTML is still loading ( async ), and/or to execute the script after the html has finished loading (defer). These attributes and either used independently or together on a script element. IE9 and […]

Per specification, the picture element is an image container whose source element is determined by one or more css media queries. The picture element’s use of media queries make it easy to serve variations of images ( not just the size ) that pair with visual breakpoints in a CSS layout. Picture element contains a […]