Mac optimises the scrolling experience based on system preferences.

Scroll setting to always

The default setting is “Automatically based on mouse or trackpad”. With the default setting, only when the user scrolls, he sees the scrollbar. Let’s say, the user has the “Always” setting turned out, he sees an ugly scrollbar like this.

Ugly scrollbar

Some CSS which used to work before don’t work well.…

Read More

It is easy to convert an SVG element into an image. Serialize the SVG element into a Base64 string and set the image src attribute.

const serializer = new XMLSerializer();
const svgString = serializer.serializeToString(svgElem);
const img = new Image();
img.src = 'data:image/svg+xml;base64,' + Base64.encode(svgString);

It is easy to save the image to a file. We do this using the Canvas toBlob and window saveAs API.…

Read More

Istanbul is a code coverage utility for JavaScript apps. It is integrated with most unit-testing frameworks like Jest. It is also possible to produce an instrumentation build with a babel plugin named babel-plugin-istanbul. This works for any React app scaffolded with Webpack configuration. However, it does not work for create-react-app (CRA). CRA does not expose webpack.config or .babelrc file, files where we can add the istanbul plugin.…

Read More

Istanbul provides code coverage metrics for automated unit tests. It provides those metrics by instrumenting the JavaScript code. Official documentation on the website provides how to integrate Istanbul with various unit testing frameworks.

But, let’s say we do not have unit tests. And we do manual testing. How much of code coverage does our testing do? For this problem, there is very little official support.…

Read More

Most people use community packages to do something as trivial as setting up a Menu on a sidebar. In my opinion, it takes more time to understand the API of a package than it takes to build the Menu from scratch. In this tutorial, I will show how you can build your own Menu using React router and SASS.

Scaffold a React app

For scaffolding a React app, please feel to use create-react-app (CRA) or Parcel.…

Read More

HTML elements can optionally have relative, absolute and fixed positions. Absolute positioning adjusts the position of an element with respect to its nearest parent container which has relative position. If there are no parents with relative position, an element with absolute position is placed within the browser window using the top, left, right or bottom properties. An element with fixed position is always positioned within the browser window.…

Read More

Server side rendering (SSR) is a technique for rendering HTML with meta tags and data when the page first loads. For React apps, the HTML is usually an empty div tag. The browser downloads the JavaScript bundle and populates the div tag with HTML. Google, the most popular search engine, crawls the content after running JavaScript. So, we may think that this is not a problem.…

Read More