Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows us to work on one component at a time. It streamlines UI development, testing, and documentation.

Storybook 6.3 was released in June 2021. Besides React 17, NPM 7, Yarn 2, and Webpack 5 support, the followings features have been supported since Storybook 6.0:

• Zero-configuration setup
• Dynamic component editing
• Multiple Storybook Composition
• Documentation improvement

In this article, we dive into the details of these features.

Zero-Configuration Setup

Storybook is complicated. It gets more difficult when there are more knobs to set up a complicated piece…

“The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems.” — W3

HTTP allows browsers and servers to communicate. It forms the basis of what a web server must do to perform the most basic operations. HTTP has gone through a number of stages. The latest draft of Hypertext Transfer Protocol Version 3 (HTTP/3) was published on May 27, 2021.

Let’s walk through HTTP’s history and explore the…

On June 8, 2021, React 18 Alpha was released. It is exciting to see what is coming in React 18.

The React 18 Working Group has been formed to provide information and support to the community through the release. React 18 Alpha can be installed with the following command:

npm i react@alpha react-dom@alpha

React 18 is a major release that brings changes on both the client side and server side. These are the new features:

• Replacing render with createRoot.
• Adding strict effects to StrictMode.
• Automatic batching for fewer renders.
• startTransition keeping UI responsive.
• useDeferredValue generating a deferred value.
• Concurrent Suspense…

A learning experience on how to recover a Mac from a battery drain and how to use computer battery optimally.

I once left my Mac in sleep state on battery, went away for a week, and the battery was completely drained after I came back. I plugged the Mac into an AC line, and the computer was powered on. I was asked to input the login password. With the correct password, the progress bar showed up and reached 100%. Then, it was stuck at 100%. There was no further progress, regardless of how long the waiting period was.

Enzyme is a JavaScript utility to test React components. It provides built-in ways to manipulate and traverse the virtual DOM as well as to simulate actions and events. It allows us to assert that the rendered components work as expected.

Enzyme, React Testing Library, and Cypress are three popular testing frameworks that work with Jest. Enzyme and React Testing Library are focused on unit tests and integration tests, while Cypress specializes in end-to-end testing.

OpenAPI Specification is a standard for both server and client.

The OpenAPI Specification (OAS) is a specification for machine-readable interface files for describing, producing, consuming, and visualizing RESTful web services. It is a standard for both server and client. Developers do not need to write, maintain, or worry about the consistency of code that will be generated automatically. In addition, Swagger UI generates beautiful documentation and acts as a test environment for API endpoints.

In addition to the OpenAPI Specification, Swagger Editor, and Swagger UI, Swagger Codegen performs the following two actions:

• Generate server stubs.
• Generate client SDKs.

In this…

We have introduced the OpenAPI Specification, Swagger Editor, and Swagger UI. Let’s look further into Swagger Codegen and Swagger Plugins.

Swagger Codegen starts with the OpenAPI Specification (OAS), and performs two actions:

• Generate server stubs.
• Generate client SDKs.

In this article, we focus on how to generate server stubs. We will talk about how to generate client SDKs in another article.

Generating server stubs is the design first approach, which starts with the OpenAPI Specification, YAML or JSON defined APIs on resources, operations, and data models. Once the design is complete, the business logic is implemented based on the generated…

Have you heard of APIs that are developed and documented by Swagger?

Yes, Swagger is hot these days. This novel approach uses the OpenAPI Specification, formerly called the Swagger Specification. After many years of API freedom, there is finally an industry standard to design, build, test, document, and use RESTful APIs.

Here is the definition from https://swagger.io/.

“Simplify API development for users, teams, and enterprises with the Swagger open source and professional toolset. Find out how Swagger can help you design and document your APIs at scale.”

Swagger is all about the APIs. UI developers are the consumers of APIs…