DEV Community: MokaDevLight

Jest Testing

MokaDevLight — Sat, 23 Apr 2022 10:49:02 +0000

When it comes to unit testing frameworks for JavaScript, Jest is certainly a serious contender for the #1 spot.

Initially, Jest was created by Facebook specifically for testing React applications. It’s one of the most popular ways of testing React components. Since its introduction, the tool has gained a lot of popularity. This popularity has led to the use of Jest for testing both JavaScript front-end and back-end applications.

In this article, we’ll talk about the ins and outs of Jest to help you get started with testing. Before we get there, though, we’ll offer you a refresher on unit testing and its importance for software quality.

After that, we’ll start covering Jest specifically, explaining:

its definition
what are its main advantages
and some of its most important characteristics

We’ll walk you through a 100% hands-on tutorial on how to get started with Jest. You’ll learn more about the vocabulary associated with Jest testing, like mocks and spies. Also, we’ll cover some of the basics of Jest testing, like using describe blocks and the keywords it and expect. Finally, we’ll take a look at snapshot testing and why it’s particularly useful for front-end testing. Let’s get started!

The What and Why of Unit Testing

The topic of software testing can often feel overwhelming. There are just too many types of testing, each operating on a different layer, verifying distinct aspects of the application and offering its unique type of feedback.

Among the myriad types of automated testing, unit testing is often cited as the most important one—see: test automation pyramid. Unit tests verify the smallest parts of your application in complete isolation, ensuring they work as expected. In unit testing, you aren’t allowed to interact with external dependencies—e.g. make an HTTP call—nor generate any kind of side-effect.

As a result of those properties, unit tests are usually:

very fast to execute
relatively easy to setup, not requiring any elaborate configuration
very precise in the feedback they provide

In the scale of automated tests, unit tests sit at the extreme opposite of end-to-end testing. The latter provide less-precise feedback, are generally slower, more fragile, though more realistic. The former are super precise in their feedback, are fast, and typically only fail due to the errors in the code.

However, they are in less realistic, because in real life users don’t interact with units in complete isolation.

To sum it up: unit tests are far from being the only type of tests your application needs, but they should represent a significant portion of your testing strategy.

What Is Jest?

Jest is a popular test framework for JavaScript. It claims to provide “delightful JavaScript testing” and, after our tutorial, I bet you might agree with this claim! Jest prides itself in offering a complete and hassle-free experience.

The completeness comes from the fact that Jest doesn’t rely on third-party tools for much of its functionality, like some competitors do. And the hassle-free part is due to Jest’s zero configuration setup. You can install it and start writing your first test in no time.

As mentioned in the introduction, Jest has gained a lot of popularity over recent years for both front-end and back-end testing. Many large companies—including Twitter, Instagram, Pinterest, and Airbnb—use Jest for React testing.

Jest itself is actually not a library but a framework. There’s even a CLI tool that you can use from the command line. To give an example, the CLI tool allows you to run only specific tests that match a pattern. Besides that, it hosts much more functionality, which you can find in the CLI documentation.

In summary, this means that Jest offers a test runner, assertion library, CLI tool, and great support for different mocking techniques. All of this makes it a framework and not just a library.

Let’s take a quick look at the advantages of Jest.

Advantages of Jest

Here’s a shortlist of Jest advantages.

Offers a CLI tool to control your tests easily
Comes with an interactive mode that automatically runs all affected tests for the code changes you’ve made in your last commit
Provides syntax to test a single test or skip tests with .only and .skip. This feature is useful when debugging individual tests
Provides excellent documentation with plenty of examples and a supportive community. You can join the Jest community via Discord or ask questions on Stack Overflow
Brings easy mocking to developers as it’s one of the most painful things to do for testing engineers. We explain further in this post how Jest mocking works
Jest offers code coverage out of the box through its CLI—just use the –coverage option or the collectCoverage property in the Jest configuration file.

Jest Characteristics

From Jest’s website, we can find four main characteristics of Jest:

Zero config: “Jest aims to work out of the box, config free, on most JavaScript projects.” This means you can simply install Jest as a dependency for your project, and with no or minimal adjustments, you can start writing your first test.
Isolated: Isolation is a very important property when running tests. It ensures that different tests don’t influence each other’s results. For Jest, tests are executed in parallel, each running in their own process. This means they can’t interfere with other tests, and Jest acts as the orchestrator that collects the results from all the test processes.
Snapshots: Snapshots are a key feature for front-end testing because they allow you to verify the integrity of large objects. This means you don’t have to write large tests full of assertions to check if every property is present on an object and has the right type. You can simply create a snapshot and Jest will do the magic. Later, we’ll discuss in detail how snapshot testing works.
Rich API: Jest is known for having a rich API offering a lot of specific assertion types for very specific needs. Besides that, its great documentation should help you get started quickly.

Before we dive a bit further into the Jest vocabulary, let’s show you how you can get started with this tool in practice.

Get Started With Jest: A Practical, Hands-On Tutorial in 5 Steps

We’ll now walk you through our five step tutorial on how to get started with testing using Jest.

1. Install Jest Globally
The first step will be to install Jest globally. That way, you gain access to Jest’s CLI. Make sure you have Node.js installed, because you’ll use npm.

Go to your terminal and run the following command:

npm install -g jest

Once the installation is complete, execute jest –version to see the version installed.

2. Create a Sample Project

You’ll now create a npm-based project to house our production code and test code.

Start by creating a folder and accessing it:

mkdir learning-jest
cd learning-jest

Then, run npm init -y to create a project. As a result, you should have a package.json file inside your folder, with this content:

{
  "name": "learning-jest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now, create a file called index.js and paste the following content on it:

function fizz_buzz(numbers) {
    let result = []

    for (number of numbers) {
        if (number % 15 === 0) {
            result.push('fizzbuzz')
        } else if (number % 3 === 0) {
            result.push('fizz')
        } else if (number % 5 === 0) {
            result.push('buzz')
        } else {
            result.push(number)
        }
    }

    return result.join(', ')
}

module.exports = fizz_buzz;

The code above contains a function that solves the famous FizzBuzz programming interview question.

3. Add Jest to the Project

You’ll now add Jest as a dev dependency to the project. Run the following command:

npm install --save-dev jest

Then, go to your package.json file and change this part:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },

To this:

"scripts": { "test": "jest" },

4. Write Your First Test

Now, create a new file called index.test.js. Paste the following content on it:

const fizz_buzz = require('./index');

describe("FizzBuzz", () => {
    test('[3] should result in "fizz"', () => {
      expect(fizz_buzz([3])).toBe('fizz');
    });

    test('[5] should result in "buzz"', () => {
      expect(fizz_buzz([5])).toBe('buzz');
    });

    test('[15] should result in "fizzbuzz"', () => {
      expect(fizz_buzz([15])).toBe('fizzbuzz');
    });

    test('[1,2,3] should result in "1, 2, fizz"', () => {
      expect(fizz_buzz([3])).toBe('fizz');
    });

});

We’ll explain Jest’s syntax in more detail later. For now, understand we’re verifying that:

passing an array containing 3 should result in “fizz”
an array containing 5 should result in “buzz”
an array containing 15 should result in “fizzbuzz”
passing an array with 1, 2, and 3 should result in “1, 2, fizz”

5. Run Your First Test

You’re now ready to run your first test. Back to your terminal, simply run npm test. You should see a result like the following:

As you can see, all four tests passed. All test suites were executed—which makes sense, since we only have one. The total time for execution was 0.616 seconds.

Now that you had a test of Jest, let’s take a step back and understand, in more detail, its syntax and vocabulary.

Jest Vocabulary

Let’s take a look at two of the most commonly used Jest terms that are also used in other testing tools: mock and spy.

Jest Vocabulary: Mock

From the Jest documentation, we can find the following description for a Jest mock: “Mock functions make it easy to test the links between code by erasing the actual implementation of a function, capturing calls to the function (and the parameters passed in those calls).”

In addition, we can use a mock to return whatever we want it to return. This is very useful to test all the paths in our logic because we can control if a function returns a correct value, wrong value, or even throws an error.

In short, a mock can be created by assigning the following snippet of code to a function or dependency:

jest.fn()

Here’s an example of a simple mock, where we just check whether a mock has been called. We mock mockFn and call it. Thereafter, we check if the mock has been called:

const mockFn = jest.fn();
mockFn();
expect(mockFn).toHaveBeenCalled();

The following example also mocks a return value for checking specific business logic. We mock the returnsTrue function and let it return false:

const returnsTrue = jest.fn(() => false);
console.log(returnsTrue()); // false;

Next up, let’s explore what a spy is.

Jest Vocabulary: Spy

A spy has a slightly different behavior but is still comparable with a mock. Again, from the official docs, we read, “Creates a mock function similar to jest.fn() but also tracks calls to object[methodName]. Returns a Jest mock function.”

What this means is that the function acts as it normally would—however, all calls are being tracked. This allows you to verify if a function has been called the right number of times and held the right input parameters.

Below, you’ll find an example where we want to check if the play method of a video returns the correct result but also gets called with the right parameters. We spy on the play method of the video object.

Next, we call the play method and check if the spy has been called and if the returned result is correct. Pretty straightforward! In the end, we must call the mockRestore method to reset a mock to its original implementation.

const video = require('./video');

test('plays video', () => {
const spy = jest.spyOn(video, 'play');
const isPlaying = video.play();

expect(spy).toHaveBeenCalled();
expect(isPlaying).toBe(true);

spy.mockRestore();
});

OK, now that we know about the two most used technical terms, let’s explore the basic structure.

Jest Basics

Let’s take a look at some basics on writing tests with Jest.

Jest Basics: Describe Blocks

A describe block is used for organizing test cases in logical groups of tests. For example, we want to group all the tests for a specific class. We can further nest new describe blocks in an existing describe block.

To continue with the example, you can add a describe block that encapsulates all the tests for a specific function of this class.

Jest Basics: “It” or “Test” Tests

Furthermore, we use the test keyword to start a new test case definition. The it keyword is an alias for the test keyword. Personally, I like to use it, which allows for more natural language flow of writing tests. To give an example:

describe('Beverage()', () => { it('should be delicious', () => { expect(myBeverage.delicious).toBeTruthy(); }); });

Jest Basics: Matchers

Next, let’s look at the matchers Jest exposes. A matcher is used for creating assertions in combination with the expect keyword. We want to compare the output of our test with a value we expect the function to return.

Again, let’s look at a simple example where we want to check if an instance of a class is the correct class we expect. We place the test value in the expect keyword and call the exposed matcher function toBeInstanceOf() to compare the values. The test results in the following code:

it('should be instance of Car', () => {
   expect(newTruck()).toBeInstanceOf(Car);
});

The complete list of exposed matchers can be found in the Jest API reference.

Jest Basics: Setup and Teardown

It’s important we understand how to prepare and clean up a test. For example, a particular test relies on a mocked database. We don’t want to call a function to set up and clean up the mocked database for each test.

To solve this problem, we can use the beforeEach and afterEach functions to avoid code duplication. Both functions allow you to execute logic before or after each test.

Here’s an example of mocking a database before each test and tear it down when each test has finished.

describe('tests with database', () => {

  beforeEach(() => {
    initDB()
  })

  afterEach(() => {
    removeDB()
  })

  test('if country exists in database', () => {
    expect(isValidCountry('Belgium')).toBe(true)
  })

})

Moreover, you can also make use of beforeAll and afterAll functions. Both functions will run before or after all tests, but only once. You can use these functions to create a new database connection object and destroy it when you’ve completed the tests.

beforeAll(() => {
  return createDBConnection()
})

afterAll(() => {
  return destroyDBConnection()
})

Lastly, let’s take a look at snapshot testing.

Jest Basics: Snapshot Testing for React Front Ends

At last, the Jest documentation suggests using snapshot tests to detect UI changes. As I mentioned earlier, snapshot testing can also be applied for checking larger objects, or even the JSON response for API endpoints.

Let’s take a look at an example for React where we simply want to create a snapshot for a link object. The snapshot itself will be stored with the tests and should be committed alongside code changes.

it('renders correctly', () => {
   const tree = renderer
      .create(<Link page="http://www.facebook.com">Facebook</Link>)
      .toJSON();
   expect(tree).toMatchSnapshot();
});

Following, the above code renders the following snapshot:

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

If the link object changes, this test will fail in the future. If the changes to the UI elements are correct, you should update the snapshots by storing the results in the snapshot file. You can automatically update snapshots using the Jest CLI tool by adding a “-u” flag when executing the tests.

Getting Started With Jest Testing

Finally, we’ve covered all the basic elements for you to get started with Jest testing. When you’re writing your first test cases, it can feel a bit uncomfortable writing mocks. However, mocks are especially useful in unit testing because they allow you to test the business logic of your function without worrying about its dependencies.

JavaScript Hoisting Explained By Examples

MokaDevLight — Thu, 21 Apr 2022 09:28:28 +0000

Summary: in this tutorial, you’ll learn about JavaScript hoisting and how it works under the hood.

Introduction to the JavaScript hoisting

When the JavaScript engine executes the JavaScript code, it creates the global execution context. The global execution context has two phases: creation and execution.

During the creation phase, the JavaScript engine moves the variable and function declarations to the top of your code. This feature is known as hoisting in JavaScript.

Variable hoisting

Variable hoisting means the JavaScript engine moves the variable declarations to the top of the script.

For example, the following example declares the counter variable and initialize its value to 1:

console.log(counter); // undefined var counter = 1;
In this example, we reference the counter variable before the declaration.

However, the first line of code doesn’t cause an error. The reason is that the JavaScript engine moves the variable declaration to the top of the script.

Technically, the code looks like the following in the execution phase:

var counter; console.log(counter); // undefined counter = 1;

During the creation phase of the global execution context, the JavaScript engine places the variable counter in the memory and initializes its value to undefined .

The let keyword
The following declares the variable counter with the let keyword:

console.log(counter); let counter = 1;

The JavaScript issues the following error:

"ReferenceError: Cannot access 'counter' before initialization

The error message explains that the counter variable is already in the heap memory. However, it hasn’t been initialized.

Behind the scenes, the JavaScript engine hoists the variable declarations that use the let keyword. However, it doesn't initialize the let variables.

Notice that if you access a variable that doesn’t exist, the JavaScript will throw a different error:

console.log(alien); let counter = 1;

Here is the error:

"ReferenceError: alien is not defined

Function hoisting
Like variables, the JavaScript engine also hoists the function declarations. This means that the JavaScript engine also moves the function declarations to the top of the script.

For example:

let x = 20,
y = 10;
let result = add(x, y);
console.log(result);
function add(a, b) {
return a + b;
}

In this example, we called the add() function before defining it. The above code is equivalent to the following:

function add(a, b){
return a + b;
}
let x = 20,
y = 10;
let result = add(x,y);
console.log(result);

During the creation phase of the execution context, the JavaScript engine places the add() function declaration in the heap memory.
To be precise, the JavaScript engine creates an object of the Function type and a function reference called add that refers to the function object.

Function expressions

The following example changes the add from a regular function to a function expression:

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
var add = function(x, y) {
return x + y;
}

If you execute the code, the following error will occur:

“TypeError: add is not a function

During the creation phase of the global execution context, the JavaScript engine creates the add variable in the memory and initializes its value to undefined.

When executing the following code, the add is undefined, hence, it isn't a function:

let result = add(x,y);

The add variable is assigned to an anonymous function only during the execution phase of the global execution context.

Arrow functions

The following example changes the add function expression to the arrow function:

let x = 20,
y = 10;
let result = add(x,y);
console.log(result);
var add = (x, y) => x + y;

The code also issues the same error as the function expression example because arrow functions are syntactic sugar for defining function expressions.

“TypeError: add is not a function

Similar to the functions expressions, the arrow functions aren’t hoisted.

Summary

JavaScript hoisting occurs during the creation phase of the execution context that moves the variable and function declarations to the top of the script.
The JavaScript engine hoists the variables declared using the let keyword, but it doesn't initialize them as the variables declared with the var keyword.
The JavaScript engine doesn’t hoist the function expressions and arrow functions.

Originally published at https://www.javascripttutorial.net.

Event Handling

MokaDevLight — Thu, 21 Apr 2022 09:20:12 +0000

It all starts with attaching event listeners to elements. Say you have a button that increments a counter each time you click it.

You can add an inline onclick attribute and that will work across all browsers but will be violating the separation of concerns and the progressive enhancement.

So you should strive for attaching the listener in JavaScript, outside of any markup.

Say you have the following markup:

<button id=”clickme”>Click me: 0</button>
You can assign a function to the onclick property of the node, but you can do this only
once:
// suboptimal solution
var b = document.getElementById(‘clickme’),
count = 0;
b.onclick = function () {
count += 1;
b.innerHTML = “Click me: “ + count;
};

If you want to have several functions executed on click, you cannot do it with this pattern while maintaining loose coupling.

Technically you can check if onclick already
contains a function and if so, add the existing one to your own function and replace the onclick value with your new function. But a much cleaner solution is to use the addEventListener() method.

This method doesn’t exist in IE up to and including version 8, so you need attachEvent() for those browsers.

Without going into all the details right now, let’s just attach a listener to our button:

var b = document.getElementById(‘clickme’);
if (document.addEventListener) { // W3C
b.addEventListener(‘click’, myHandler, false);
} else if (document.attachEvent) { // IE
b.attachEvent(‘onclick’, myHandler);
} else { // last resort
b.onclick = myHandler;
}

Now when this button is clicked, the function myHandler() will be executed.
Let’s have this function increment the number in the “Click me: 0” button label.
To make it a little more interesting, let’s assume we have several buttons and a single myHandler() for all of them. Keeping a reference to each button node and a counter for the number
will be inefficient, given that we can get that information from the event object that is created on every click.

Let’s see the solution first and comment on it after:

function myHandler(e) {
var src, parts;
// get event and source element
e = e || window.event;
src = e.target || e.srcElement;
// actual work: update label
parts = src.innerHTML.split(“: “);
parts[1] = parseInt(parts[1], 10) + 1;
src.innerHTML = parts[0] + “: “ + parts[1];
// no bubble
if (typeof e.stopPropagation === “function”) {
e.stopPropagation();
}
if (typeof e.cancelBubble !== “undefined”) {
e.cancelBubble = true;
}
// prevent default action
if (typeof e.preventDefault === “function”) {
e.preventDefault();
}
if (typeof e.returnValue !== “undefined”) {
e.returnValue = false;
}
}

There are four parts in the event handler function:

• First, we need to gain access to the event object, which contains information about the event and the page element that triggered that event. This event object is passed to the callback event handler, but not when using the onclick property where it’s
accessible through the global property window.event instead.
• The second part is doing the actual work of updating the label.
• Next is canceling the propagation of the event. This is not required in this particular example, but in general if you don’t do it, then the event bubbles up all the way to the document root or even the window object.
Again we need to do it two ways:

the W3C standard way (stopPropagation()) and then differently for IE (usingcancelBubble).

• Finally, prevent the default action, if this is required.
Some events (clicking a link, submitting a form) have default actions, but you can prevent them by using preventDefault() (or for IE, by setting returnValue to false).

Event Delegation
The event delegation pattern benefits from the event bubbling and reduces the number of event listeners attached to separate nodes.

If there are 10 buttons inside a div element, you can have one event listener attached to the div as opposed to 10 listeners attached to each button.

Let’s have an example with three buttons inside a div So we’re working with the following markup:

<div id=”click-wrap”>
<button>Click me: 0</button>
<button>Click me too: 0</button>
<button>Click me three: 0</button>
</div>

Instead of attaching listeners to each button, you attach one to the “click-wrap” div.

Then you can use the same myHandler() function from the previous example with only one little change: you have to filter out clicks you’re not interested in.

In this case you look only for clicks on any button, so all other clicks in the same div could be ignored.

The change to myHandler() would be to check if the nodeName of the source of the event is a “button”:

// …
// get event and source element
e = e || window.event;
src = e.target || e.srcElement;
if (src.nodeName.toLowerCase() !== “button”) {
return;
}
// …

The drawback of the event delegation is the slightly more code to filter out the events that happen in the container that are not interesting for you.

But the benefits — performance and cleaner code — outweigh the drawbacks significantly, so it’s a highly recommended pattern.

Modern JavaScript libraries make it easy to use event delegation by providing convenient APIs.
For example YUI3 has the method Y.delegate(), which enables you to specify a CSS selector to match the wrapper and another selector to match the nodes you’re interested in.

This is convenient because your callback event handler function will actually never be called when the event happens outside the nodes you care about.
In this case, the code to attach an event listener would be simply:

Y.delegate(‘click’, myHandler, “#click-wrap”, “button”);

And thanks to the abstraction of all browser differences done in YUI and the fact that the source of the event is determined for us, the callback function will be much simpler:

function myHandler(e) {
var src = e.currentTarget,
parts;
parts = src.get(‘innerHTML’).split(“: “);
parts[1] = parseInt(parts[1], 10) + 1;
src.set(‘innerHTML’, parts[0] + “: “ + parts[1]);
e.halt();
}

Good Luck

JavaScript Closure

MokaDevLight — Thu, 21 Apr 2022 08:37:11 +0000

Closure is one of important concept in JavaScript. It is widely discussed and still confused concept. Let’s understand what the closure is.

Closure means that an inner function always has access to the vars and parameters of its outer function, even after the outer function has returned.

You have learned that we can create nested functions in JavaScript. Inner function can access variables and parameters of an outer function (however, cannot access arguments object of outer function). Consider the following example.

function OuterFunction() {

    var outerVariable = 1;

    function InnerFunction() {
        alert(outerVariable);
    }

    InnerFunction();
}

In the above example, InnerFunction() can access outerVariable.

Now, as per the definition above, InnerFunction() can access outerVariable even if it will be executed separately. Consider the following example.

Example: Closure

function OuterFunction() {
    var outerVariable = 100;
    function InnerFunction() {
        alert(outerVariable);
    }
    return InnerFunction;
}
var innerFunc = OuterFunction();
innerFunc(); // 100

n the above example, return InnerFunction; returns InnerFunction from OuterFunction when you call OuterFunction(). A variable innerFunc reference the InnerFunction() only, not the OuterFunction(). So now, when you call innerFunc(), it can still access outerVariable which is declared in OuterFunction(). This is called Closure.

A function can return another function in JavaScript. A function which is assigned to a variable is called function expression.

One important characteristic of closure is that outer variables can keep their states between multiple calls. Remember, inner function does not keep the separate copy of outer variables but it reference outer variables, that means value of the outer variables will be changed if you change it using inner function.

Example: Closure

function Counter() {
    var counter = 0;
    function IncreaseCounter() {
        return counter += 1;
    };
    return IncreaseCounter;
}
var counter = Counter();
alert(counter()); // 1
alert(counter()); // 2
alert(counter()); // 3
alert(counter()); // 4

In the above example, outer function Counter returns the reference of inner function IncreaseCounter(). IncreaseCounter increases the outer variable counter to one. So calling inner function multiple time will increase the counter to one each time.

Closure is valid in multiple levels of inner functions.

Example: Closure

function Counter() {

    var counter = 0;
    setTimeout( function () {
        var innerCounter = 0;
        counter += 1;
        alert("counter = " + counter);
        setTimeout( function () {
            counter += 1;
            innerCounter += 1;
            alert("counter = " + counter + ", innerCounter = " + innerCounter)
        }, 500);
    }, 1000);
};
Counter();

As per the closure definition, if inner function access the variables of outer function then only it is called closure.

The following is not a closure.

var Counter = (function () {
        var i = 0;
        return { counter : i += 1 };
})();

When to use Closure?

Closure is useful in hiding implementation detail in JavaScript. In other words, it can be useful to create private variables or functions.

The following example shows how to create private functions & variable.

Example: Closure

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };   
})();
alert(counter.value()); // 0
counter.increment();
counter.increment();
alert(counter.value()); // 2
counter.decrement();
alert(counter.value()); // 1

Good Luck

The event loop

MokaDevLight — Thu, 21 Apr 2022 08:27:43 +0000

JavaScript has a runtime model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks. This model is quite different from models in other languages like C and Java.

Runtime concepts

The following sections explain a theoretical model. Modern JavaScript engines implement and heavily optimize the described semantics.

Function calls form a stack of frames.

function foo(b) {
  let a = 10
  return a + b + 11
}
function bar(x) {
  let y = 3
  return foo(x * y)
}
const baz = bar(7) // assigns 42 to baz

Order of operations:

When calling bar, a first frame is created containing references to bar's arguments and local variables.
When bar calls foo, a second frame is created and pushed on top of the first one, containing references to foo's arguments and local variables.
When foo returns, the top frame element is popped out of the stack (leaving only bar's call frame).
When bar returns, the stack is empty.

Note that the arguments and local variables may continue to exist, as they are stored outside the stack — so they can be accessed by any nested functions long after their outer function has returned.

Heap

Objects are allocated in a heap which is just a name to denote a large (mostly unstructured) region of memory.

Queue

A JavaScript runtime uses a message queue, which is a list of messages to be processed. Each message has an associated function that gets called to handle the message.

At some point during the event loop, the runtime starts handling the messages on the queue, starting with the oldest one. To do so, the message is removed from the queue and its corresponding function is called with the message as an input parameter. As always, calling a function creates a new stack frame for that function’s use.

The processing of functions continues until the stack is once again empty. Then, the event loop will process the next message in the queue (if there is one).

Event loop

The event loop got its name because of how it’s usually implemented, which usually resembles:

while (queue.waitForMessage()) {
  queue.processNextMessage()
}

queue.waitForMessage() waits synchronously for a message to arrive (if one is not already available and waiting to be handled).

"Run-to-completion"

Each message is processed completely before any other message is processed.

This offers some nice properties when reasoning about your program, including the fact that whenever a function runs, it cannot be preempted and will run entirely before any other code runs (and can modify data the function manipulates). This differs from C, for instance, where if a function runs in a thread, it may be stopped at any point by the runtime system to run some other code in another thread.

A downside of this model is that if a message takes too long to complete, the web application is unable to process user interactions like click or scroll. The browser mitigates this with the "a script is taking too long to run" dialog. A good practice to follow is to make message processing short and if possible cut down one message into several messages.

Adding messages

In web browsers, messages are added anytime an event occurs and there is an event listener attached to it. If there is no listener, the event is lost. So a click on an element with a click event handler will add a message—likewise with any other event.

The function setTimeout is called with 2 arguments: a message to add to the queue, and a time value (optional; defaults to 0). The time value represents the (minimum) delay after which the message will be pushed into the queue. If there is no other message in the queue, and the stack is empty, the message is processed right after the delay. However, if there are messages, the setTimeout message will have to wait for other messages to be processed. For this reason, the second argument indicates a minimum time—not a guaranteed time.

Here is an example that demonstrates this concept (setTimeout does not run immediately after its timer expires):

const seconds = new Date().getSeconds();

setTimeout(function() {
  // prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
  console.log(`Ran after ${new Date().getSeconds() - seconds} seconds`);
}, 500)

while (true) {
  if (new Date().getSeconds() - seconds >= 2) {
    console.log("Good, looped for 2 seconds")
    break;
  }
}

Zero delays

Zero delay doesn't mean the call back will fire-off after zero milliseconds. Calling setTimeout with a delay of 0 (zero) milliseconds doesn't execute the callback function after the given interval.

The execution depends on the number of waiting tasks in the queue. In the example below, the message "this is just a message" will be written to the console before the message in the callback gets processed, because the delay is the minimum time required for the runtime to process the request (not a guaranteed time).

The setTimeout needs to wait for all the code for queued messages to complete even though you specified a particular time limit for your setTimeout.

(function() {

  console.log('this is the start');

  setTimeout(function cb() {
    console.log('Callback 1: this is a msg from call back');
  }); // has a default time value of 0

  console.log('this is just a message');

  setTimeout(function cb1() {
    console.log('Callback 2: this is a msg from call back');
  }, 0);

  console.log('this is the end');

})();

// "this is the start"
// "this is just a message"
// "this is the end"
// "Callback 1: this is a msg from call back"
// "Callback 2: this is a msg from call back"

Several runtimes communicating together

A web worker or a cross-origin iframe has its own stack, heap, and message queue. Two distinct runtimes can only communicate through sending messages via the postMessage method. This method adds a message to the other runtime if the latter listens to message events.

References:
JavaScript Patterns Book

ReactJS's components written in Typescript

MokaDevLight — Thu, 21 Apr 2022 08:13:13 +0000

Actually you can use ReactJS's components in Typescript as in facebook's example. Just replace 'jsx' file's extension to 'tsx':

//helloMessage.tsx:
var HelloMessage = React.createClass({
 render: function() {
 return <div>Hello {this.props.name}</div>;
 }
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);

But in order to make full use of Typescript's main feature (static type checking) should be done couple things:

1) convert React.createClass example to ES6 Class:

//helloMessage.tsx:
class HelloMessage extends React.Component {
 render() {
 return <div>Hello {this.props.name}</div>;
 }
}
ReactDOM.render(<HelloMessage name="John" />, mountNode);

2) next add Props and State interfaces:

interface IHelloMessageProps {
name:string;
}
interface IHelloMessageState { //empty in our case } class HelloMessage extends React.Component {
constructor(){
super();
}
render() {
return
<div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(, mountNode);

Now Typescript will display an error if the programmer forgets to pass props. Or if they added props that are not defined in the interface.

References:
ReactJSNotesForProfessionals Book

Use Axios with React

MokaDevLight — Thu, 21 Apr 2022 07:57:59 +0000

This tutorial was verified with Node.js v16.13.1, npm v8.1.4, react v17.0.2, and axios v0.24.0.

Step 1 — Adding Axios to the Project
In this section, you will add Axios to a React project you created following the How to Set up a React Project with Create React App tutorial.

“npx create-react-app react-axios-example”

To add Axios to the project, open your terminal and change directories into your project:

“cd react-axios-example”

Then run this command to install Axios:

“npm install axios@0.24.0”

Next, you will need to import Axios into the file you want to use it in.

Step 2 — Making a GET Request

In this example, you create a new component and import Axios into it to send a GET request.

Inside your React project, you will need to create a new component named PersonList.

First, create a new components subdirectory in the src directory:

“mkdir src/components”

In this directory, create PersonList.js and add the following code to the component:

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        {
          this.state.persons
            .map(person =>
              <li key={person.id}>{person.name}</li>
            )
        }
      </ul>
    )
  }
}

First, you import React and Axios so that both can be used in the component. Then you hook into the componentDidMount lifecycle hook and perform a GET request.

You use axios.get(url) with a URL from an API endpoint to get a promise which returns a response object. Inside the response object, there is data that is then assigned the value of person.

You can also get other information about the request, such as the status code under res.status or more information inside of res.request.

Add this component to your app.js:

import PersonList from './components/PersonList.js';

function App() {
  return (
    <div ClassName="App">
      <PersonList/>
    </div>
  )
}

Then run your application:

“npm start”

View the application in the browser. You will be presented with a list of 10 names.

Step 3 — Making a POST Request

import React from 'react';
import axios from 'axios';

export default class PersonAdd extends React.Component {
  state = {
    name: ''
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Inside the handleSubmit function, you prevent the default action of the form. Then update the state to the user input.

Using POST gives you the same response object with information that you can use inside of a then call.

To complete the POST request, you first capture the user input. Then you add the input along with the POST request, which will give you a response. You can then console.log the response, which should show the user input in the form.

Step 4 — Making a DELETE Request

import React from 'react';
import axios from 'axios';

export default class PersonRemove extends React.Component {
  state = {
    id: ''
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="number" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Thanks for posting.

Use react-error-boundary to handle errors in React

MokaDevLight — Wed, 20 Apr 2022 18:55:41 +0000

What’s wrong with this code?

import * as React from 'react'
import ReactDOM from 'react-dom'

function Greeting({subject}) {
  return <div>Hello {subject.toUpperCase()}</div>
}

function Farewell({subject}) {
  return <div>Goodbye {subject.toUpperCase()}</div>
}

function App() {
  return (
    <div>
      <Greeting />
      <Farewell />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

If you send that to production, your users are going to get the white screen of sadness:

If you run this with create-react-app’s error overlay (during development), you’ll get this:

The problem is we need to either pass a subject prop (as a string) or default the subject prop's value. Obviously, this is contrived, but runtime errors happen all of the time and that's why it's a good idea to gracefully handle such errors. So let's leave this error in for a moment and see what tools React has for us to handle runtime errors like this.

try/catch?

The naive approach to handling this kind of error would be to add a try/catch:

import * as React from 'react'
import ReactDOM from 'react-dom'

function ErrorFallback({error}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{color: 'red'}}>{error.message}</pre>
    </div>
  )
}

function Greeting({subject}) {
  try {
    return <div>Hello {subject.toUpperCase()}</div>
  } catch (error) {
    return <ErrorFallback error={error} />
  }
}

function Farewell({subject}) {
  try {
    return <div>Goodbye {subject.toUpperCase()}</div>
  } catch (error) {
    return <ErrorFallback error={error} />
  }
}

function App() {
  return (
    <div>
      <Greeting />
      <Farewell />
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

That “works”:

Something went wrong:

Cannot read properties of undefined (reading 'toUpperCase')

Something went wrong:

Cannot read properties of undefined (reading 'toUpperCase')

But, it may be ridiculous of me, but what if I don’t want to wrap every component in my app in a try/catch block? In regular JavaScript, you can simply wrap the calling function in a try/catch and it'll catch any errors in the functions it calls. Let's try that here:

import * as React from 'react'
import ReactDOM from 'react-dom'

function ErrorFallback({error}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{color: 'red'}}>{error.message}</pre>
    </div>
  )
}

function Greeting({subject}) {
  return <div>Hello {subject.toUpperCase()}</div>
}

function Farewell({subject}) {
  return <div>Goodbye {subject.toUpperCase()}</div>
}

function App() {
  try {
    return (
      <div>
        <Greeting />
        <Farewell />
      </div>
    )
  } catch (error) {
    return <ErrorFallback error={error} />
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

Unfortunately, this doesn’t work. And that’s because we’re not the ones calling Greeting and Farewell. React calls those functions. When we use them in JSX, we're simply creating React elements with those functions as the type. Telling React that "if the App is rendered, here are the other components that will need to be called." But we're not actually calling them, so the try/catch won't work.
I’m not too disappointed by this to be honest, because try/catch is inherently imperative and I'd prefer a declarative way to handle errors in my app anyway.

React Error Boundary

This is where the Error Boundary feature comes in to play. An “Error Boundary” is a special component that you write to handle runtime errors like those above. For a component to be an Error Boundary:

It must be a class component 🙁
It must implement either getDerivedStateFromError or componentDidCatch.

Luckily, we have react-error-boundary which exposes the last Error Boundary component anyone needs to write because it gives you all the tools you need to declaratively handle runtime errors in your React apps.

So let’s add react-error-boundary and render the ErrorBoundary component:

import * as React from 'react'
import ReactDOM from 'react-dom'
import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{color: 'red'}}>{error.message}</pre>
    </div>
  )
}

function Greeting({subject}) {
  return <div>Hello {subject.toUpperCase()}</div>
}

function Farewell({subject}) {
  return <div>Goodbye {subject.toUpperCase()}</div>
}

function App() {
  return (
    <div>
      <ErrorBoundary FallbackComponent={ErrorFallback}>
        <Greeting />
        <Farewell />
      </ErrorBoundary>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Something went wrong:

TypeError: Cannot read property 'toUpperCase' of undefined

Error Recovery

The nice thing about this is you can almost think about the ErrorBoundary component the same way you do a try/catch block. You can wrap it around a bunch of React components to handle lots of errors, or you can scope it down to a specific part of the tree to have more granular error handling and recovery. react-error-boundary gives us all the tools we need to manage this as well.

Here’s a more complex example:

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{color: 'red'}}>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

function Bomb({username}) {
  if (username === 'bomb') {
    throw new Error('💥 CABOOM 💥')
  }
  return `Hi ${username}`
}

function App() {
  const [username, setUsername] = React.useState('')
  const usernameRef = React.useRef(null)

  return (
    <div>
      <label>
        {`Username (don't type "bomb"): `}
        <input
          placeholder={`type "bomb"`}
          value={username}
          onChange={e => setUsername(e.target.value)}
          ref={usernameRef}
        />
      </label>
      <div>
        <ErrorBoundary
          FallbackComponent={ErrorFallback}
          onReset={() => {
            setUsername('')
            usernameRef.current.focus()
          }}
          resetKeys={[username]}
        >
          <Bomb username={username} />
        </ErrorBoundary>
      </div>
    </div>
  )
}

Handle All Errors

Unfortunately, there are some errors that React doesn’t/can’t hand off to our Error Boundary. To quote the React docs:

Error boundaries do not catch errors for:

Event handlers
Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
Server side rendering
Errors thrown in the error boundary itself (rather than its children

Most of the time, folks will manage some error state and render something different in the event of an error, like so:

function Greeting() {
  const [{status, greeting, error}, setState] = React.useState({
    status: 'idle',
    greeting: null,
    error: null,
  })

  function handleSubmit(event) {
    event.preventDefault()
    const name = event.target.elements.name.value
    setState({status: 'pending'})
    fetchGreeting(name).then(
      newGreeting => setState({greeting: newGreeting, status: 'resolved'}),
      newError => setState({error: newError, status: 'rejected'}),
    )
  }

  return status === 'rejected' ? (
    <ErrorFallback error={error} />
  ) : status === 'resolved' ? (
    <div>{greeting}</div>
  ) : (
    <form onSubmit={handleSubmit}>
      <label>Name</label>
      <input id="name" />
      <button type="submit" onClick={handleClick}>
        get a greeting
      </button>
    </form>
  )
}

Unfortunately, doing things that way means that you have to maintain TWO ways to handle errors:

Runtime errors
fetchGreeting errors

Luckily, react-error-boundary also exposes a simple hook to help with these situations as well. Here's how you could use that to side-step this entirely:

function Greeting() {
  const [{status, greeting}, setState] = React.useState({
    status: 'idle',
    greeting: null,
  })
  const handleError = useErrorHandler()

  function handleSubmit(event) {
    event.preventDefault()
    const name = event.target.elements.name.value
    setState({status: 'pending'})
    fetchGreeting(name).then(
      newGreeting => setState({greeting: newGreeting, status: 'resolved'}),
      error => handleError(error),
    )
  }

  return status === 'resolved' ? (
    <div>{greeting}</div>
  ) : (
    <form onSubmit={handleSubmit}>
      <label>Name</label>
      <input id="name" />
      <button type="submit" onClick={handleClick}>
        get a greeting
      </button>
    </form>
  )
}

So when our fetchGreeting promise is rejected, the handleError function is called with the error and react-error-boundary will make that propagate to the nearest error boundary like usual.

Alternatively, let’s say you’re using a hook that gives you the error:

function Greeting() {
  const [name, setName] = React.useState('')
  const {status, greeting, error} = useGreeting(name)
  useErrorHandler(error)

  function handleSubmit(event) {
    event.preventDefault()
    const name = event.target.elements.name.value
    setName(name)
  }

  return status === 'resolved' ? (
    <div>{greeting}</div>
  ) : (
    <form onSubmit={handleSubmit}>
      <label>Name</label>
      <input id="name" />
      <button type="submit" onClick={handleClick}>
        get a greeting
      </button>
    </form>
  )
}

In this case, if the error is ever set to a truthy value, then it will be propagated to the nearest error boundary.

In either case, you could handle those errors like this:

const ui = ( <ErrorBoundary FallbackComponent={ErrorFallback}> <Greeting /> </ErrorBoundary> )

And now that’ll handle your runtime errors as well as the async errors in the fetchGreeting or useGreeting code.

Good luck.

Tailwind CSS

MokaDevLight — Tue, 19 Apr 2022 08:59:15 +0000

CSS technology was one of the biggest game-changers in web development. It allowed for more styling capabilities and freedom. As CSS grew, so did its complexity. CSS in retrospect is not challenging to write, but it can be tricky to implement.

The next phase in CSS was the development of libraries and frameworks. One of the most famous examples of CSS frameworks is Bootstrap.

Frameworks like Bootstrap have one major disadvantage. Due to increased growth and usage, they became too big and offer less control over their styles. Learning frameworks like Bootstrap has become increasingly challenging because developers have to learn hundreds of classes.

In this article, we will cover:

What Tailwind CSS is.
Different ways to install and configure Tailwind CSS.
How to use utility-based classes over regular pre-written classes.

To follow along with this tutorial, a basic understanding of HTML and CSS is necessary. Any prior experience with a CSS framework is an added advantage.

What is Tailwind CSS

Tailwind is a CSS framework created by Adam Wathan. Unlike other frameworks, it does not come prebuilt with classes to add to the HTML tags. Instead, it uses a different approach. It brings a much lower level of control by using utility-based classes.

Installation

Let’s get right into it and install Tailwind CSS so we can discover more about it. There are two ways to install Tailwind CSS, depending on your use case.

Method 1: Using the CDN

Using a CDN is the most common way of using any CSS framework, and Tailwind CSS is no exception. We add the Tailwind CSS file from the CDN in form of a link in the HTML page’s head section.

First, create a HTML file and give it a name. We will name ours index.html. Then inside it, Write the boilerplate HTML code and add the CDN as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section Tailwind Demo</title>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body></body>
</html>

Great. We have Tailwind CSS installed in our project.
Note: Installing Tailwind CSS by using its CDN has a few drawbacks such as:

You cannot add any third-party plugins.
Since Tailwind CSS fetches files when the file loads, you cannot purge unused files.
You cannot tinker with some configurations like the theme.

Method 2: Using npm
Using the npm method bestows the full experience of Tailwind CSS. It is a common installation method because most JavaScript frameworks use a similar approach. There are minimal differences in the installation process, depending on the framework’s architecture.

Let’s get started.
First, let’s create a directory where we will be working.
In your terminal, run:

mkdir section-tailwind-demo && cd section-tailwind-demo
npm init -y

Next, let’s install Tailwind CSS. We also need to install some other packages alongside it. We need PostCSS because Tailwind CSS relies on a preprocessor to bundle the CSS. Tailwind uses a PostCSS plugin called autoprefixer to transpile the CSS into vanilla CSS.

In the terminal run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

The command above will install all the dependencies we need. Next, we have to create a script to configure Tailwind CSS and PostCss. To generate the scripts, we make use of the tailwind cli utility provided by Tailwind CSS.

In the terminal run:

npx tailwind init -p

It will generate two files, tailwind.config.js and postcss.config.js. The tailwind.config.js looks like this:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

The postcss.config.js file should look like this:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Now that we have successfully set up the environment, let’s setup Tailwind CSS in our project.

First, create two files — an HTML file called index.html and a stylesheet called style.css.

The HTML part can have the basic boilerplate syntax at the beginning of the article. In the CSS file, we need to inform autoprefixer that we will use Tailwind CSS.

We do this by importing the Tailwind CSS files, as shown below:

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, we need to build our Tailwind CSS, so in the terminal run:

npx tailwindcss-cli@latest build -o css/tailwind.css

This command will create a tailwind.css file in the CSS folder. The -o in the command stands for the output path, and we specified that our output file would be in the css/tailwind.css path.

Note: You do not need to have a CSS file to work with that command, it will still generate the Tailwind CSS file. You may, however, need the style.css file to add custom styles, write Tailwind CSS in that file, or mix Tailwind CSS with custom CSS.

A different way of processing the CSS is to do it in production by adding a script in the package.json. We will use the postcss cli to run the operation during build time.

To do this, let’s install PostCSS CLI.

Run this in the terminal:

npm install postcss-cli

Next, we add the build script in the package.json like this:

"scripts": {
 "build": "postcss style.css -o css/tailwind.css"
 }

Now, when you run npm run build it should compile the Tailwind CSS file into a CSS folder, as we wanted.

We then need to add our Tailwind CSS file to the HTML like we would a regular CSS file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/tailwind.css" />
  </head>
  <body></body>
</html>

Like that, we have everything set up.

Working with utility classes

To show and explain how utility classes work, let’s create a button using Tailwind CSS. This will show how Tailwind CSS affects the HTML elements.

Within the Body tags in the HTML page, add:

<button>Section</button>

Let’s add some classes to our button because it looks plain. In Tailwind CSS, the color value ranges depending on the color intensity from 100 to 900. The utility class for the background is bg. To make our button’s background a faint shade of green, we add the class bg-green-100.

Next, let’s style the text in the button. For this, we use the utility class text. Color rules remain, hence to add text to the color, we add the class text-green-100.

Our button is looking good so now let’s add some padding. For padding, the syntax is quite straightforward. It’s the property, size, then the value.

This applies to all size and spacing properties, like margin, for example. To add padding on the bottom, it would be pb-8. These values range from 0 to 64. To see how ranges work in-depth, check the documentation.

In our example, our padding will be py-2 for the top and the bottom and px-6 for the left and right. Let’s add some margin on the top with my-20 and some on the left with mx-20.

Now, let’s make the button more rounded with the rounded utility. You can find a full list of border-radius utilities and all their classes in the documentation. We will use the border-radius of 0.5em, which corresponds to rounded-lg.

Finally, let’s add some hover magic to make the button more lively. To do so, we add the classes hover:hover:bg-green-600 and
hover:text-green-200.

With that, we have styled our button with no CSS at all. The critical thing to take away is how much control Tailwind CSS gives you over the styling and elements. To get the full code for the tutorial.

Our final code looks like this:

`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Section-Tailwind-Demo</title>
    <link rel="stylesheet" href="css/tailwind.css" />
  </head>
  <body>
    <button
      type="button"
      class="hover:bg-green-600 hover:text-green-200 bg-green-100 text-green-700 mx-20 my-20 px-6 py-2 rounded-lg"
    >
      Section
    </button>
  </body>
</html>`

Good Luck