Tag: JavaScript
-
Webpack: Managing Tree Shaking
PROBLEM Sometimes, Webpack’s tree-shaking may accidentally eliminate imported code from import statements. For example, we may have a root JS file that imports a CSS file:- … and for some reason, the CSS file will never appear in the final bundle even if the Webpack config contains proper rules to handle CSS files. SOLUTION To […]
-
React: Debugging Layout Thrashing
PROBLEM When the React app grows larger over time, it is highly likely to run into situations where the component keeps re-rendering for no apparent reason. There are many reasons why this is happening… to name a few…. parent component re-renders, this.props or this.state has changed, etc. The key is to quickly find out what […]
-
React + Recompose: Calling Multiple HOC Wrappers
PROBLEM Sometimes, wrapping a React component with multiple High Order Components (HOC) can get rather unwieldy and unreadable. For example:- SOLUTION To fix this, we can leverage recompose library. Now, we can rewrite the above example like this:- Keep in mind, the HOC order defined in compose(..) is important.
-
Webpack + ESLint: Automatically Fix ESLint Errors
PROBLEM Given the following webpack.config.js… When running any Webpack command, ESLint may find violations and halt the entire process with the following error message:- SOLUTION Certain errors (ex: trailing commas, wrong indentation, extra semicolon) are easily fixable. There’s no need to halt the process and wait for developers to fix these obvious errors. To configure […]
-
ES6 + Mocha + Sinon: Mocking Imported Dependency
PROBLEM Let’s assume we have the following 2 files:- apis.js service.js Let’s assume we want to test the logic in service.js without using nock to mock the HTTP call in apis.js. While proxyquireify allows us to mock out the apis.js dependency in service.js, sometimes it is a little more complicated than needed. SOLUTION A simpler […]
-
Underscore.js: Introducing _.chain(…)
PROBLEM Let’s assume we have the following JSON data:- What we want to do is to get all unique employees and ordered them by their names so that we get the following data:- SOLUTION 1: Less Elegant Underscore.js provides various functions that allow us to pull this off. While doable, the code is virtually not […]