Frontend Scrapbook

Notes that make a difference

Bundlers & Webpack 4

By admin on Sun Sep 27 2020

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

By admin on Thu Sep 17 2020

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. ) […]

Flexbox

By admin on Wed Sep 16 2020

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 […]

CSS Animations

By admin on Wed Sep 16 2020

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 […]

Testing ReactJS Applications

By admin on Mon Sep 14 2020

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’ / […]

Advanced React Patterns

By admin on Fri Sep 11 2020

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. […]

Web Performance

By admin on Wed Sep 09 2020

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 […]

Web workers

By admin on Wed Aug 26 2020

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 […]

Async vs defer

By admin on Tue Aug 25 2020

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 […]

picture element vs img tag

By admin on Tue Aug 25 2020

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 […]