In this article, I am writing to introduce the following
For me understanding how babel, eslint works has brought me lots of headache when I am researching to set up unit test for my company project, so I am writing this as a docuementation and hope others get some help from my experience.
There are several things that need or can be config.
Configuring Jest itself, either in:
Options can be find here.
Configuring the unit test:
In package.json and jest.config.js, you can specific which presets and plugins to use. Preset is just a collection of plugins.
If you are using a preset from a node_modules, you can specific it like that:
"jest": {
"preset": "the_module"
}
And it would point to the node_modules the_module/jest-presest.js
Using Jest with Babel
Babel is a javascript code compiler. If you are using ES6 module syntax, you need to use Babel.
According to the docs, you can enable support for Babel by installing the babel-jest plugin.
Normally you don’t need to anything, but if you have other code processors, like CSS or image processors, you have to explicitly define babel-jest as a transformer for your JavaScript code
. Here is how to do (in package.json/ jest.config.js)
// package.json / jest.config.js
"transform": {
"\\.js$": "babel-jest",
"\\.css$": "custom-transformer",
...
}
If you need to configure babel-jest
"transform": {
"\\.js$": path.resolve(__dirname, 'babel-jest.js'),
"\\.css$": "custom-transformer",
...
}
// in babel-jest.js
const babelJest = require('babel-jest');
// do something
module.exports = babelJest.createTransformer({
babelrc: false,
configFile: false,
plugins,
presets,
If you are not using React, but other React based framework (e.g. Preact)
// sample usage with Preact
[
require.resolve('babel-plugin-jsx-pragmatic'),
{ module: 'preact', import: 'h', export: 'h' },
],
As specific in the docs, it runs like this:
In
const profile = (
<div>
<img src="avatar.png" className="profile" />
<h3>{[user.firstName, user.lastName].join(" ")}</h3>
</div>
);
Out
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const profile = _jsxs("div", {
children: [
_jsx("img", {
src: "avatar.png",
className: "profile",
}),
_jsx("h3", {
children: [user.firstName, user.lastName].join(" "),
}),
],
});
This is a basic introduction to how to config jest for your projects! Hopefully you now have better understanding on this topic. Thanks for reading!
When I started learning about CSS, I thought it was all about margin, color and stuff. The world of CSS is very simple. Yet not until I start working as a software developer that I found out CSS can be much more complicated than I thought.
Here are 3 concepts that I only learnt after I start working full-time.
To understand what is reflow and repaint, we must first understand how is webpage generated. The most basic website can be generated with HTML and CSS, which are responsible for the DOM and the style respectively. Combining the two, we got a Render Tree.
Reflow and repaint come after we have the render tree:
Here is a list of what forces reflow.
Any change on other css property other than the list above trigger repaint.
1. Toggle class instead of style
const button = document.querySelector("button");
const div = document.querySelector(div);
button.onClick = () => {
// toggle class
div.classList.toggle("is-clicked");
// toggle style
div.style.backgroundColor = "red";
};
2. Batch operation
// bad code
const div1 = document.querySelector("#div1");
div1.style.backgroundColor = "red";
const div2 = document.querySelector("#div1");
div1.style.backgroundColor = "red";
const div3 = document.querySelector("#div1");
div1.style.backgroundColor = "red";
// good code
const div1 = document.querySelector("#div1");
const div2 = document.querySelector("#div1");
const div3 = document.querySelector("#div1");
div1.style.backgroundColor = "red";
div1.style.backgroundColor = "red";
div1.style.backgroundColor = "red";
Instead of separating the code, put the code together. Another library I have used is FastDom. This library automatically batch the operations for you, so that it makes your dom lightening fast.
Chrome provides a very good tools for us to anaylse the repaint and reflow, so we can improve base on the results. To use the tools go to Inspect > Performance. Clicke the record button, perform your operation then you will get something like I show above.
Here I found a nice video on how to use the performance tab.
Imagine the stacking context as stacks of layers, one layer on top of each other. And z-index
, specified by a positive, zero or negative value on a positioned
element (position: absolute/ relative/ fixed
) determines the order of the layer.
More detail explanation can be found here
This articles gives a list on scenarios that will form a stacking context.
For inspecting layer go to inspect > customize and control devTools (the three little gray dotts in the top right corners) > more tools > layer and you will see the following
z-index
becomes a problem when developer starts putting arbitrary number like z-index: 9999
. The stacking context becomes very messy as the order and relation of each z-index
are not clear.
Here gives a good solution on how to manage z-index.
Basically put the system looks like this, which makes the whole relation of different layers very clear.
const base = 0;
const above = 1;
export const backdrop = base;
export const openButton = above + backdrop;
export const dropdown = above + openButton;