Prerequisites

This guide explains the Morgan library’s code to help you understand how it works under the hood. This is helpful if you have experience with Express and you're interested in understanding the inner workings that produce Morgan log lines. An understanding of closures in JavaScript is helpful for this guide but not necessary.

Table of Contents

• What is an Express Middleware?

• A Brief Overview of How Morgan Works

• What is a Morgan Token?

• What Happens When Morgan is Initialised?

• What Happens When Morgan Captures a Request?

• Next Steps

What is an Express Middleware?

According to Express documentation, a middleware is a function that has access to the request and response objects and the next function of an Express request cycle. They are generally used to intercept requests to execute side-effects before or after the request is handled by its route handler.

A middleware can be used to:

• Make changes to the request and the response objects: It can make changes to the request and response objects by attaching properties like headers and cookies to them.

• Terminate the request-response cycle: It can terminate a request and send a response to the client before or after the request is handled by its route handler.

• Execute the next middleware in the stack: It can trigger the execution of the middleware after it via the next function argument.

A function called next is usually the third argument of a middleware and it is used to pass the request to the next middleware. If the next function is not executed in a middleware and the request is not explicitly terminated by sending a response to the client, the request will be left hanging.

The interface of a middleware is shown in the code snippet below:

function middleware(request, response, next) {
    // operations to be performed when this middleware is executed
    next() // execute the next middleware
}

A middleware can intercept and handle cases where preceding middleware or route handlers throw unhandled errors. These middlewares are usually called error handler middlewares and accept four arguments as shown below:

function errorHandlerMiddleware(error, request, response, next) {}

The error argument represents the unhandled error.

Some middlewares like Morgan and cors are higher-order functions. They accept configuration arguments when initialised and return a middleware function, executed by Express when hit by a request.

function initialise(...configArgs) {
    // make use of configArgs here
    return function middleware(request, response, next) {
        // can also make use of configArgs here
        // operations to perform when this middleware is hit by a request
        next() // execute the next middleware
    }
}

A Brief Overview of How Morgan Works

import morgan from "morgan"
// morgan(format, [options])
morgan("tiny") // initialise morgan and return a middleware
// Sample output: GET /tiny 200 2 - 0.188 ms

Morgan is initialised by executing it with a required format argument and an optional options argument. The format argument may be:

• A predefined Morgan format name

• A format string containing predefined tokens (a token set)

• A custom format function that returns a log output in the form of a string

The options argument is optional. It is an object with three properties:

• immediate (boolean): If true, the log output will be created on receiving requests and not when a response is sent. It defaults to false.

• skip (function): The function accepts the request and response objects as arguments and returns a boolean value based on the logic in it. If the value returned is true, the log line for a request is not logged. skip defaults to false.

• stream (WritableStream): Output stream for writing log lines. It defaults to process.stdout but it could be a file.

When Morgan is initialised, it stores its initialisation arguments in closure variables and returns a middleware function. The function is executed when a request hits it and it outputs a log line for the request. The format and where the log line is output to are determined by the initialisation arguments.

What is a Morgan Token?

A Morgan token is a string prefixed by a colon, corresponding to property of the request or response objects or a user-generated value. For example, the request method’s token is ':method' and the response status code’s token is ':status'. A token can also accept an argument to customise its behaviour. For instance, in ':date[format]', format can be replaced with clf, iso or web to set the format of the date that would be in the log line. An understanding of Morgan tokens is crucial to understanding how Morgan works.

You can create new tokens using the morgan.token function. The code snippet below creates a new token called ':type' which corresponds to the response Content-Type header:

morgan.token('type', function (req, res) {
    return res.headers['content-type']
})

Morgan has predefined named format (tiny, dev, short, combined, common) strings containing a set of tokens and each named format has its specific token set and configuration. The token set for tiny is ':method :url :status :res[content-length] - :response-time ms'. Morgan can accept these named formats as the value of the format argument.

Aside from accepting named formats, Morgan can also accept a token set (for example ':method :url :status :res[content-length] - :response-time ms') as the format argument. A third argument type that Morgan accepts as the format argument is a format function. A format function accepts three arguments and returns a string that forms the log line for each request. For example, the format function described below:

morgan(function (tokens, req, res) {
    return `method: ${tokens.method(req, res)}
path: ${tokens.url(req, res)}
code: ${tokens.status(req, res)}`
})

This will produce a log line output like:

method: GET
path: /
code: 200

tokens.method, tokens.url and tokens.status are examples of functions on the morgan object that can generate values to be logged. To illustrate, the table below shows sample token methods, their token and sample output values:

The next sections of this article explain how Morgan works under the hood. To follow along, open up Morgan’s index.js file on GitHub.

What Happens When Morgan is Initialised?

When Morgan is initialised, it makes a copy of the arguments provided to it. For arguments that were not provided, Morgan sets default values for them. For instance, if no format string argument was provided, Morgan uses the 'default' named format and logs a deprecation notice afterwards with a suggested fix.

Morgan then sets up the formatLine function - the function that creates and returns the log line for a request when executed. How does it create the log line?

First, Morgan checks if format is a format function. If it is, the format function is assigned to formatLine and next, Morgan sets up the output stream. If format is not a function, it is passed as an argument to getFormatFunction. getFormatFunction accepts format and looks up Morgan’s object store to check if format is:

• One of Morgan’s named formats or a user-defined named format created via morgan.format

• A token set

If it is neither of the two, Morgan uses the default named format.

function getFormatFunction (name) { // `name` is also `format`
  var fmt = morgan[name] || name || morgan.default

  return typeof fmt !== 'function'
    ? compile(fmt)
    : fmt
}

If the named format corresponds to a format function after the lookup, Morgan returns the format function, which is then assigned to formatLine, else, it corresponds to a token set. Morgan compiles the token set into a format function through the compile function - one of the most important functions in the Morgan package.

How the compile Function Works

The compile function accepts a token set and returns a function that has the interface of a format function. How does it do this?

With the JavaScript replace method, it uses a RegEx to search for all occurrences of a token in the token set and replaces each occurrence. If the token set is ':method :res[content-length] - :response-time ms' , the RegEx replace method replaces the tokens as illustrated in the table below:

The result of the RegEx replace is prefixed with "use strict"\n return "" and ends up producing the string below:

"use strict" 
    return "" +  
    (tokens["method"](req, res) || "-") + " " +   
    (tokens["res"](req, res, "content-length") || "-") + " - " + 
    (tokens["response-time"](req, res) || "-") + " ms"

The string above is used to create a format function using the Function constructor and returned as:

function (tokens, req, res) {
  "use strict"
  return "" +
    (tokens["method"](req, res) || "-") + " " +
    (tokens["res"](req, res, "content-length") || "-") + " - " +
    (tokens["response-time"](req, res) || "-") + " ms"
}

The format function is eventually stored in formatLine.

When formatLine is executed with morgan as the tokens argument, it will create a log line. In the case of the sample token set, it will create a log line that will look like GET 20 - 1.233 ms.

After creating the formatLine function, Morgan uses the createBufferStream function to set up the streaming of the log lines created to the preferred output if set by options.stream. If options.stream is not set, it uses process.stdout.

Morgan does all this setting up so that it can create log lines quickly on capturing a request. It will be inefficient to do all of these for each request.

What Happens When Morgan Captures a Request?

When Morgan captures a request, it stores the IP address of the client using the getip function. Next, it stores the time that the request was triggered in the startAt property of the request object.

Then Morgan tries to generate the log line for the request and log it by executing the logRequest function. Morgan checks if the log line should be output on request, and if it should, Morgan executes logRequest and executes next thereafter to pass the request to the next middleware.

if (immediate) {
  logRequest()
} else {
  onHeaders(res, recordStartTime)
  onFinished(res, logRequest)
}

next()

If the log output should be created on response, Morgan registers two functions on the response object event listeners:

• An function to be run when headers start to be written to the response object: When this listener is triggered, it records the time when headers start to be written to the response object as _startAt and startTime. These values are used to calculate the response time and the total time of the request.

• A function to be run when the request closes, finishes or errors: It executes logRequest when this event occurs.

  Just when Node.js starts sending a response to the client, a _startAt property – the time when the response starts getting sent – is attached to the response object. The absolute difference between _startAt on the request object and _startAt on the response object is the response time of the request and can be seen through ":response-time".

  ":total-time" is the total time taken from when the request was received to when the response was completely sent. In practice, total-time will be equal to or slightly greater than response-time, depending on how long it takes to write the response body to the stream after the response has started.

Within logRequest, Morgan checks the value of the skip option. If it is a function, it is executed and if it returns true, Morgan doesn’t create a log output for the request and it exits.

function logRequest () {
  if (skip !== false && skip(req, res)) {
    debug('skip request')
    return
  }

  var line = formatLine(morgan, req, res)

  if (line == null) {
    debug('skip line')
    return
  }

  stream.write(line + '\n')
};

If skip is false or executing it evaluates to false, Morgan generates the log line for the request using formatLine. If the log line is null, Morgan exits, else it sends the log line to the output medium and exits.

Next Steps

You have learned how the Morgan Express middleware outputs logs. You now have foundational skills to pick up another middleware or Node.js library like helmet or cors that you use and study it to see how it works. Choose one, study it, write about it, and share it with others.

If you have any questions, you can connect with me on LinkedIn. I’ll be happy to respond.

For example, to add features like authentication or styling, you'll need to find a good third-party library to handle it.

In this comprehensive guide, I'm going to show you all of the libraries that I would recommend you use in 2024 to build fast, reliable React apps with ease.

Table of Contents

• React Framework
• Package Manager
• CSS & UI Libraries
• State Management
• Data Fetching
• Routing
• Authentication
• Database & ORM
• Dates & Times
• Forms
• Drag & Drop
• Mobile Apps
• Deployment
• TypeScript
• Become a Pro React Developer

🛠️ React Framework

First of all, how do we even create our React app in 2024?

If you want a client-rendered React project, your best choice is Vite, which has displaced the deprecated Create React App tool.

If you're interested in building a server-rendered or full-stack React project, Next.js is the most complete and popular full-stack React framework.

Next.js version 13 introduced the app router, which gave us features like server components and server actions. These allow us to fetch data and render our React components on the server.

If some of Next.js's features are too complex or you don't understand how to use them, a great full-stack alternative for making dynamic and static sites is Remix.

If you're making an application that you want to load quickly and largely serve static content, another great pick is Astro. Astro allows you to use React alongside other frameworks like Vue and Svelte (meaning it is “framework agnostic”) and is designed to ship the smallest amount of JavaScript necessary to the client, which results in very fast load times.

📦 Package Manager

To install all of these libraries listed in this guide, you're going to need something called a package manager.

If you have Node.js installed, which is necessary to run a React project locally on your computer, you can simply use NPM, which is still a great choice in 2024. There are other alternatives to NPM, including Yarn and PNPM.

The newest alternative, which is quickly becoming very popular in the JavaScript world, is Bun. Bun is both a JavaScript runtime like Node as well as a package manager and is marketed as a faster alternative to Node and NPM.

🎨 CSS & UI Libraries

Now that you've got your project set up and your libraries installed, how are you going to style your React projects?

All of the frameworks I've mentioned above include basic CSS support. It's perfectly fine in 2024 if you want to stick to just styling your React projects with plain CSS.

You can use CSS style sheets or CSS modules, but perhaps the most popular choice at the moment in terms of pure styling is to use Tailwind CSS. Tailwind CSS does come with a few setup steps, but it allows you to chain pre-made classes together to quickly add styles directly within your component files.

ShadCN is a very popular UI library for 2024 that combines Tailwind CSS with a component library called Radix UI. Component libraries like Radix allow you to easily add components without coding them yourself.

ShadCN has become popular due to the greater control it provides over how your components look with the help of Tailwind CSS.

There are a bunch of other very popular functional component libraries as well. Material UI still remains popular, as well as others like Mantine and Chakra UI. Which one you pick really depends on how you want your final app to look. I'd recommend trying out a bunch of these UI libraries and see which one you like best.

💽 State Management

React has built-in tools such as useState and useReducer to manage your app state in basic applications. If you're using Next.js, state management has been moved to the URL when working with server components. Despite these options, you may need a way to manage state in a more precise way.

You might have lots of pieces of state and want greater control over how state updates render your components. If so, you can reach for a dedicated state management library.

Libraries such as Zustand, Recoil, and Jotai, which are all very similar, allow you to manage state simply by declaring properties and methods on an object. This ultimately is the simplest way to handle state management across your app's components.

If I had to pick one state management library for all of my React projects in 2024, I would choose Zustand. It takes almost no time to learn how to use it. It also doesn't require you to add a provider component to your application, which makes it very convenient to use in any component you like.

🐕 Data Fetching

State management and data fetching often go hand in hand. If you're building a client-rendered React app, you're likely going to need a data fetching library.

The best way to fetch data from a server in a React app in 2024 remains React Query or Tanstack Query as it's now called. TanStack Query gives you fine-grained control over not only fetching data, when to fetch and refetch it, caching, all through convenient custom hooks, as well as very easily change or mutate data.

Another solid alternative is SWR, which also offers a custom hook to handle queries and mutations, but it's far simpler in terms of what it offers. You can't go wrong with picking either one and fetching data and performing your HTTP requests with the fetch API.

Here's an article that walks you through some of the most popular methods of data fetching in React (including Tanstack Query and SWR).

🧭 Routing

If you're using a framework like Next.js, Remix, or Astro, your routing is already taken care of. All of them come with built-in ways to create routes or pages in your project.

With a client-rendered React app such as one made with Vite or Create React App, you're going to need to pick a routing library. React Router still remains the most popular choice. It takes care of every routing need you might have. It’s also very advanced due to its data loading features with the loader prop. The loader prop allows you to fetch data for a given route without using an external library like React Query.

An up-and-coming library that appears to have equally good features is Tanstack Router. The Tanstack Router was made to be fully type-safe and offer great defaults for data fetching just like React Router version 6 provides.

While Tanstack Router is a bit newer, you really can't go wrong with either choice, and it's a perfect pairing if you're already using Tanstack Query or SWR in your applications.

🔒 Authentication

While authentication is something that's handled by the server side of our projects, it's worth knowing what libraries integrate best with React projects, both on the client and the server.

In 2024, Supabase has emerged as a very robust authentication solution and offers easy integration with React apps, both on the server, say, in a Next.js project, and on the client. In past years, Firebase was chosen for similar reasons, but it's harder to integrate on the server side of things.

If you're using Next.js, you have a ton of options available to you such as NextAuth, Clerk, and the newcomer Lucia. It's unfortunate that there isn't currently a built-in auth library for Next.js, but perhaps in the future there'll be one.

In the meantime, I'll personally be using Supabase and would highly recommend you check them out as well via their documentation.

🥞 Database & ORM

Much like authentication, your database is something that will and should speak largely to your server-side code.

Databases like Supabase and Firebase don't require that you have a server. You can get and change data directly in the client, and you can add security rules within your dashboard to make sure certain types of requests are allowed or not allowed according to users' authentication status and role.

Outside of these two options, if you're using a traditional server or a full-stack framework, there are countless options. In 2024, the general preference is clearly for SQL databases like MySQL or PostgreSQL over NoSQL databases like MongoDB or Firebase.

With your database, to talk to your database, you'll either use plain SQL or an ORM that allows you to use a custom query language. Popular options for ORMs include Prisma or Drizzle. Both of them allow you to generate type-safe code so that you know what data will be returned and both integrate very well with SQL or NoSQL databases of your choosing.

🕰️ Dates & Times

When you're working with JavaScript, it's always recommended to have a date library. JavaScript's date constructor is unpredictable and virtually impossible to work reliably with things like time zones.

There are a bunch of options, but I tend to gravitate to date-fns or day.js. Both are very small but extensive libraries that allow you to manipulate JavaScript dates either in the browser or on the back end. You can't go wrong with either one.

📋 Forms

You may not need a form library in most cases if you're just building an app with a simple sign-up form, using the required prop on your inputs is usually all you need.

If you're building something more complex and have a lot of forms, React Hook Form is a fully featured form library that allows you to validate form input and display errors with very minimal code.

Other form libraries, such as Formik and React Final Form, will give you the same functionality, but React Hook Form is a bit better because it has a more modern API based on hooks and usually requires less code.

☔️ Drag & Drop

When it comes to adding drag and drop to your application, you almost certainly need a third-party library. The most popular choice in the past has been React Beautiful DnD. As of 2024, it is no longer receiving regular updates.

Going forward, a solid replacement for drag and drop is to use DnD Kit. It's lightweight, very flexible, and the documentation includes a bunch of super helpful examples covering every use case you might have when implementing drag and drop.

📱 Mobile Apps

If you want to build a mobile app, the library to do so for React developers has always been React Native. There are some exciting libraries pushing the boundaries of React Native to extend to the web.

Expo is a tool similar to Vite, but for making mobile React apps. It has great features like fast refresh, and with Expo Go, you can easily run your project on your own device as you develop it. Expo is making it easier to take your mobile code base and also deploy it to the web.

This is the end goal of other projects such as Tamagui, which you should also check out if you want to make a real native app that runs on Android, iOS, and the web.

If you have a React app that you've already written to run in the browser, the fastest way to have it run as a native app and launch it on the Apple App Store or Google Play Store is to use Capacitor.js.

🚀 Deployment

There are more ways than ever to deploy your React app. Vercel is probably the easiest platform to deploy your React app with, whether it's client-rendered or server-rendered. They support just about every framework you can think of, including non-JavaScript languages. They have a generous hobby plan, and competitors in the same space include Netlify and Cloudflare Pages.

Cloudflare Pages might be a little bit trickier to set up, especially if you have a full-stack React project, but it is the most generous in terms of price out of all of these options. If you don't mind paying for a server, you can use something like Railway or Render, which is great to deploy to if you have a server that is separate from your React app.

✨ The #1 Library To Know

Finally, the number one essential library you should know if you're a React developer in 2024 is TypeScript. All of the frameworks I've mentioned include options to build a React app with TypeScript.

TypeScript is a tool that allows you to detect type errors in your JavaScript code to help you prevent runtime errors. You can build all of your React projects with just JavaScript, but at some point, you're going to either see the benefits of using TypeScript yourself or be looking at a codebase that has TypeScript in it.

I'd highly recommend you set aside some time to learn TypeScript. It's the most essential, the most in-demand tool to know as a React developer and can greatly improve your overall code quality.

🏆 Become a Professional React Developer

Looking for the ultimate resource to learn React from start to finish?

✨ Introducing: The React Bootcamp

The bootcamp features every resource to help you succeed with React:

• 🎬 200+ in-depth videos
• 🕹️ 100+ hands-on React challenges
• 🛠️ 5+ impressive portfolio projects
• 📄 10+ essential React cheatsheets
• 🥾 A complete Next.js bootcamp
• 🖼️ A complete series of animated videos

Click below to try the React Bootcamp for yourself.

Click to get started

In this article, I'll discuss some of my favourite libraries you can use for building your documentation site.

And don't worry if you don't have that much experience creating documentation yet. Whether you've built a simple documentation site for a small startup or personal project or a vast and complex site for a large company, these libraries will be helpful to you.

Tips for Writing Good Documentation

Before we get into the libraries themselves, though, there are some critical points you'll want to keep in mind when you're building your documentation sites.

Make sure your documentation is clean and easily recognizable.

Ensure your documentation folder is separate in the mono repo, even if you use a poly repo or separate repository.

This separate repository should contain only the markdown and mdx files. This will help your contributors easily be able to recognize which folder is for documentation.

A great example of clean documentation is Next.js, which has a separate folder for documentation, as you can see below:

Nextjs documentation is easily recognizable in the mono repo and contains only the Markdown.

Provide clear guidelines in your documentation.

To improve documentation quality, you should write clear guidelines for technical writers. For example,

1. what front matter is required in the file markdown?
2. Which spelling conventions are correct – for example, do you accept javascript (all lowercase) or JavaScript (with the proper casing)? Or both?
3. Which commands are needed for formatting and linting before applying a pull request?

A pro tip for documentation sites is mentioning additional resources, such as tutorials, courses, and article links for new contributors.

The best examples of clear guidelines are Next.js and the Awesome Repository. Both have clear guidelines for documentation.

Nextjs has clear guidelines for documentation.

Make it easy to contribute.

When contributors want to help out with your project, many of them just want to focus on writing. Most technical writers or documentation contributors do not have time to install and set up your project locally.

Many online IDEs are available these days, and more are coming, such as GitHub Dev, VS Code Dev, Code Sandbox, and GitLab.

Nowadays, many developers and contributors update the documentation file using GitHub's inbuilt IDE or other online IDEs and create pull requests without installing your repository locally.

So, you should at least configure your project to work with one of the online IDEs. It helps to save time and improves the productivity of the technical writer and contributor.

Helpful Documentation Libraries:

1. Nextra
2. Docusaurus
3. Lume
4. Docsify.js
5. Markdoc
6. Content layer
7. Git book
8. Outstatic CMS
9. Code doc
10. Frontmatter

Nextra

Nextra

Nextra is an open-source, simple, powerful, and flexible site generation framework built on Nextjs. Nextra was created by developers at Vercel.

Nextra helps manage your content with MDX. With Nextra, you can build both small and large-scale documentation websites.

Nextra comes with various built-in features, such as:

1. Organizing content with file-system routing.
2. Theme Toggling (Light to Dark theme)
3. Inbuilt search
4. Multiple layouts
5. Syntax highlighting
6. Multiple languages (Internationalized)
7. Custom themes

Nextra also helps to save you time and energy, as you can directly work on your documentation without writing a single line of code. You also do not have to maintain the code base. This lets you focus on documentation writing.

Cons

1. There are fewer customizations you can make with Nextra
2. Nextra comes with more limited features

To learn more about Nextra, you can check out the tutorial I wrote about it.

Docusaurus

docusaurus

Docusaurus is an open-source static-site generator built and maintained by the Meta team. Docusaurus helps you write and manage your large and small documentation and blog websites.

Docusaurus comes with various built-in features, such as:

1. It's easy to configure
2. You can customize your site's layout, design, and features with React components
3. You can write content in Markdown and MDX.
4. It handles localization well
5. You can manage versioning
6. It has a built-in plugins ecosystem
7. You can customize and change themes
8. There's good client API support
9. It has TypeScript and JSDoc support
10. You can create both a blog and a documentation website with Docusaurus.

Docusaurus is a well-established library used by many companies. And one of the best parts about Docusaurus is that it has a more significant number of active contributors, so the tool is well-maintained.

Cons

1. Customizing and managing a large documentation website with Docusaurus can be tricky because of complex Docusaurus configuration options.
2. Configuring Docusaurus blog plugins can be a massive headache because of the configuration. Lastly, Docusaurus can not support categories for articles.
3. Docusaurus does not come with search functionality. To enable search functionality, you have to depend on a third-party service. Confirming the third-party search functionality is sometimes not an easy task.

Lume

lume

Lume is a fast and flexible open-source static site generator based on Deno. You can build documentation sites, a portfolio, a company website, or a blog with Lume.

Lume comes with various built-in features, such as:

1. Processors
2. Plugins support
3. Multiple file formats, like markdown, yaml, JavaScript, typescript, jsx and nunjucks, and it's easy to extend with other features.
4. Inbuilt search and pagination support
5. It supports multiple template engines (JSX, Preact, MDX, Remark, and so on)
6. Ability to create relationships between two pages

You can customize so many things with Lume that you may not even be able to imagine until you try it out.

Cons

1. Starting with Lume is not an easy task. It's a steeper learning curve, and it may take some time to get enough experience to use it effectively – so Lume is not the best for beginners.
2. You need a third-party service to enable search functionality on your website.
3. Since there's so much customization possible, sometimes you might get confused about what you've chosen.

Still, Lume gives you more control and power over your documentation site, so if you're willing to take the time to learn it, I think you'll enjoy it. You can read my in-depth tutorial on freeCodeCamp to learn more about Lume.

Docsify.js

Docsify.js

Docsify is an open-source, simple, and lightweight documentation generator. It's heaven for developers with a C, Rust, and C++ background. You can start using Docsify without having any knowledge of JavaScript or React.js.

Docsify comes with a number of built-in features, such as:

1. It's simple and lightweight
2. It's easy to customize and configure
3. You can extend Docsify's functionally with built-in plugin API
4. It has multiple themes support
5. There's emoji support
6. It supports server-side rendering

In Docsify, you can focus on writing documentation without worrying about maintaining the codebase.

You can start your documentation site within minutes. You can deploy the Docsify website with one click on GitHub pages.

The most important thing about Docsify is that you don't need prior knowledge to work with Docsify or any other tools or configuration.

Cons

1. Docsify comes with fewer features, but customization options are available.
2. Docsify only has a few themes and plugins available on the internet.
3. Most of the themes you find on the internet are outdated in terms of their UI.

To learn more about Docsify, read my in-depth tutorial on freeCodeCamp.

Markdoc

Mark doc

Markdoc is an open-source, powerful, and flexible Markdown-based framework. Markdoc is built and maintained by the Stripe team. With Markdoc, you can develop your personal blogs and documentation sites.

Markdoc comes with several built-in features, such as:

1. It's lightweight
2. There's built-in syntax validation
3. It has support for partials
4. You can extend Markdoc with custom functions
5. It supports tags
6. You can customize styles with annotations
7. It supports variables and attributes

Markdoc is developer and writer-friendly. You can build interactive documentation and static content sites using pure HTML, Next.js, and React.js.

Cons

1. To work with makdoc, you must write the entire website code from scratch.
2. Markdoc is not for beginner developers. You must know some advanced JavaScript and React concepts when working with Markdoc.

Contentlayer

Content layer

Contentlayer is an open-source content SDK that validates and transforms your content into type-safe JSON data so you can easily use it with your existing frameworks, such as Next.js.

The best part about Contentlayer is that you can build a type-safe schema for your blog and documentation.

Contentlayer works similarly to Markdoc – you must write the documentation and maintain the code base.

There are many helpful features, but here are a few:

1. It's framework agnostic
2. It's built to be very fast
3. Makes it easier to parse content on your site
4. You can use JavaScript/TypeScript – no new query language required
5. It has automatic content and frontmatter validation

Cons

1. Contentlayer comes with support for a limited number of frameworks.
2. You must write website code from scratch to work with the Content layer.

Read my in-depth tutorial on Medium to learn more about Contentlayer.

Gitbook

Git book

Gitbook is not open-source, but it comes with free and paid plans. Gitbook is built and designed to manage documentation. You can even develop your API and service documentation website with Gitbook.

Git Book comes with various built-in features, such as:

1. It has a no-code solution
2. You can easily integrate it with other applications
3. You can customize and change the theme with one click
4. It's easy to use it to collaborate with your team
5. It has a powerful block-based editor
6. You can embed code your demo code with code sandbox IDE
7. It has built-in search support
8. It has built-in SEO, sitemap and caching & CDN support

Gitbook comes with a no-code solution – you do need to write a single line of code to create a documentation site. Gitbook provides you with a modern feel for creating documentation without writing code.

You can integrate Gitbook with other services like GitHub. And you do not need to worry about deploying Gitbook – it does all the hard work for you. With one click, you can focus on writing and designing or changing themes in your documentation in Gitbook.

Cons

1. Many features like theme customization and team management come with the paid plan.

Outstatic CMS

Outstatic CMS

Outstatic CMS is a Next.js-based open-source static CMS that helps you manage your content with the help of GitHub.

Outstatic cms comes with several built-in features, such as:

1. There's an AI completion option
2. You can manage your content with custom fields
3. It's quick and easy to setup
4. You don't need a database
5. It's a modern content editor

Using Outstatic CMS, you can easily publish, update, and remove the content using the dashboard and editor. This is helpful if you don't know how to use Markdown and some who depend on grammar tools, for example, Grammarly, Turnitin, Quillbot, and so on.

Outstatic CMS only works with Next.js and GitHub. Outstatic directly creates content inside your GitHub repository using Github API.

Cons

1. You need to write website code design to build and test from scratch.
2. Outstatic CMS does not work offline.

Read my in-depth tutorial on Medium to learn more about it.

Code doc

Code Doc

Code Doc is an open-source, simple, lightweight, easy-to-configure documentation generator tool that helps create beautiful and modern software documentation websites within minutes.

Code Doc comes with several built-in features, such as:

1. It's simple and lightweight
2. It's easy to customize and configure
3. It has an enhanced markdown and code block experience
4. It has integrated search and dark mode
5. You can extend the functionality with the Code doc Plugin API
6. You can build your own custom components

With code doc, you focus on your documentation writing rather than writing and maintaining your codebase. But Code Doc is easy to customize and configure. You do not need prior knowledge to use it.

The most important thing about Code Doc is that it has more modern UI features than Docsify.

Cons

1. A Code Doc project or repository cannot be actively maintained by its developer.

Front Matter

Front Matter CMS

Front Matter is a Headless CMS right in your Visual Studio Code. Front matter gives a helping hand to technical writers and coders.

Front Matter cms comes with several built-in features, such as:

1. It works seamlessly with any static site generator
2. It's fully configurable
3. It brings the features/benefits of a CMS to your VS Code
4. You get a full site/page preview within VS Code
5. You can manage your content, media, snippets, and data with VS Code
6. You can edit your metadata
7. You can check your SEO status in VS Code

The tool works inside VS Code, letting you edit, write, update, and delete documentation in your VS Code without ever having to leave the editor. You can write your documentation using Markdown and VS Code.

You can also edit your metadata (front matter like title, description, tag, date, and so on) and check the SEO status in VS Code.

The best part is integrating Front Matter with other tools or libraries, such as Nextra, Docusaurus, Lume, and Docsify, to enhance the developer's writing experience using VS Code.

Cons

1. You cannot use Front Matter CMS with other IDEs like Vim, Neovim, Atom, Sublime Text, JetBrains IDEs, and so on.
2. Front Matter CMS is not useful for everyone. Front matter CMS Only targets software developers who will find it very useful.

Read my in-depth tutorial on Medium to learn more about the Front Matter CMS.

Conclusion

Without documentation, your product or service will never be successful. Spend equal time on one code base and as well on documentation.

For quick and short-term documentation, I recommended Git Book, nextra, and Docusaurus. If you have time and teams, go with Outstatic CMS, Content layer, and Mark doc. Lastly, you do not know JavaScript and reactjs. You can go with Git Book and Docsify.

I am not recommending the Code Doc library due to inactive maintenance by its developer. I'm not sure if the code doc was abandoned by its developer or not.

You can hire me as a freelance developer with Upwork and other updates. Follow me on Twitter (X) and Medium.

Prismane was designed with performance in mind, ensuring lightning-fast loading times for a better user experience.

In this article, you will learn what Prismane is, its cons and pros, how to set up our development environment, and how to build applications using Prismane.

Key Features of Prismane UI

The library is a large collection of 107+ React components, including buttons, inputs, menus, tables, and more. This enables developers to not reinvent the wheel every time they need common UI elements. Plus, you can customize them according to your preference.

In addition, Prismane offers prebuilt Dark mode support, which adds an extra layer of accessibility and style to your projects. Many users prefer dark mode because it reduces eye strain and improves readability in low-light conditions.

It also has TypeScript support, which allows for type-safe and error-free development. TypeScript enforces strong typing, which means variables, parameters, and return values must adhere to specific data types. This helps catch type-related errors at compile-time rather than at runtime, which reduces the likelihood of unexpected issues in your code.

Prismane also offers a custom styling system that allows you to easily create and apply custom themes to your applications.

Lastly, it has a variety of custom hooks, such as a form builder hook and a toast notification hook, which allow you to encapsulate and reuse complex logic across different parts of your application.

Benefits of Using Prismane UI

Prismane UI components are all designed to follow a consistent style guide, which ensures that your application has a polished and professional look and feel.

The library also provides a variety of styling options, as well as the ability to create your own custom components. It is highly customizable, so you can easily create user interfaces that match your specific needs.

On top of that, it is free and open source, which gives you the freedom to run, study, modify, and distribute the software. This means you have control over how the software functions, which can be crucial for customization and security.

Lastly, the library is designed to be easy to use – even for developers who are new to React. It provides developers with a large collection of pre-built components and hooks, which can significantly speed up the development process.

Disadvantages of Using Prismane UI

Prismane is a relatively new library, so it may not have the same level of documentation, features, and community as older, more established libraries.

How to Build A Prismane Application

We will be using Next.js and Prismane to develop our application.

Let's start by making sure our development environment is ready.

First, install Node.js (you can download it here if you don't already have it). Node.js version 18 or above is required.

In this tutorial, we will be using Visual Studio Code, but you can use any IDE of your choice.

Now, let's create a Next.js app by running the following command:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

Then, change the directory to our project's directory using the following command:

cd nextjs-blog

Let's run the development server using the following command to make sure our application is running well:

npm run dev

After making sure everything is fine, press CTRL+C and install Prismane:

npm install @prismane/core

In pages/index.js, add the following code:

import { Card, Image, Text, Button, Flex, fr, PrismaneProvider } from "@prismane/core";
import { Star, ShoppingCart } from "@phosphor-icons/react";


export default function App() {
  return (
    <PrismaneProvider>
    <Card w={360} gap={fr(2)} className="card">
      <Image
        src="https://img.freepik.com/free-photo/black-headphones-digital-device_53876-96805.jpg?size=626&ext=jpg&ga=GA1.1.460882575.1681882906&semt=sph"
        br="md"
        fit="cover"
        mb={fr(2)}
      />
      <Flex gap={fr(2)}>
        <Text fs="md" cl="green">
          <Star /> 4.5 (120 reviews)
        </Text>
        <Text fs="md" cl="blue">
          In Stock
        </Text>
      </Flex>
      <Text fs="lg" fw="bold" cl="black">
        Premium Headphones
      </Text>
      <Text cl="gray">
        Enjoy crystal-clear sound quality with our premium headphones, perfect
        for music lovers and audiophiles.
      </Text>
      <Text fw="bold" fs="2xl" cl="primary">
        $149.99
      </Text>
      <Flex gap={fr(4)} mt="auto">
        <Button cl="primary" bg="yellow">
          Add to Wishlist
        </Button>
        <Button cl="white" bg="blue">
          <ShoppingCart /> Add to Cart
        </Button>
      </Flex>
    </Card>
    </PrismaneProvider>
  );
}

The above code is a React component that renders a card with information about a product. The code imports the necessary components and icons from the Prismane and Phosphor Icons libraries, and then defines a component named App().

The App() component renders a Card component with the following children:

• An Image component with the product image

• A Flex container with two Button components, one for adding the product to the wishlist, and one for adding the product to the cart

• A Text component displaying the product name

• A Text component displaying the product description

• A Text component displaying the product price

• A Flex container with two Button components, one for adding the product to the wishlist and one for adding the product to the cart

We are also using Prismane's style props for styling our app in the code above.

Prismane has its own reset.css, so it is automatically injected when the app is wrapped with the PrismaneProvider component.

How to Style Our Application

Next, let's create an _app.js file in pages folder and add the following code:

function App({ Component, pageProps }) {
    return (
      <Component {...pageProps} />
    );
  }

  export default App;

In a Next.js application, the _app.js file is a special layout component that is used to wrap our entire application. It serves as the entry point for customizing the behavior and appearance of our app across all pages.

Now, let's style our app. Create a global.cssfile in our pagesfolder and add the following code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

  .card {
    font-family: Poppins, sans-serif;
  }
  body {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: rgb(var(--prismane-colors-base-300));
  }

The code is importing the Poppins font from Google Fonts and applying it to the .card element. It also defines the width, height, display property, and background color for the body element.

Lastly, let's import our global.css file in our app.js file by adding the following line of code:

import './global.css';

You can find the full code here.

And here it the code's output:

Output

This is just a simple example of how to develop a web application using Prismane. There are many other features and options available in Prismane UI that you can use to create more complex and sophisticated applications.

Conclusion

Overall, Prismane UI is a great React UI library that offers a wide range of features and benefits. It is a good choice for developers of all experience levels, and it is well-suited for a variety of projects.

References

Prismane website

Next.js website

Phosphor-icons repository

Getting started with an animation library does not have to be hard. Anyone can add a bit of animation to their site regardless of whether they are good working with the front end or not.

Let me show you how you can get started.

What is Rough Notation?

Rough notation is lightweight yet amazing JavaScript animation library that you can use to get started with animations pretty quickly. And it is open source!

The docs are pretty straightforward, which is one reason it's a great animation library to start with.

In this article, I'll take you through the basic steps to get started with Rough Notation, and we'll build a pretty small site with some animations.

If you like using the library, check out their super repository. Give it a star, and if you love this article, shout them out! (This isn't sponsored. I just love the library :))

You can check out the Rough Notation docs here.

Let's Get Animating

How to Code the HTML/CSS

We can't animate something we don't see. So to start, we'll create a pretty simple static page with some minimal HTML and CSS.

For now, our HTML will just look bland. Nothing much going on. Just a nicely centered thing with a Poppins font going on.

<div class="main">

        <header>
            <h1 class="header">Aloha. Hello. Salut.</h1>
        </header>

        <main>
            <p>Today, we will animate this with <scan class="rough-notation">Rough Notation</scan></p>

            <p>This is a pretty simple site. If you love this, check Rough Notation out on <scan class="link">Github</scan>. They are open source, and they are amazing!</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores omnis molestias voluptas, odit laboriosam esse distinctio provident pariatur accusamus cum?</p>

            <h2>A bit about Rough Notation</h2>
            <ul class="list">
                <li>It's open source.</li>
                <li>It's easy to start with.</li>
                <li>I love it!</li>
            </ul>
        </main>
    </div>

In the above code, notice the classes I have added to some of the elements. This is how we select what elements to animate.

Our CSS itself is bare, but here is how it is and what our page looks like:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Poppins', sans-serif;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 10px;
    margin: 40px;
}
h1{
    margin-bottom: 10px;
}
p{
    margin-bottom: 15px;
}
ul{
    margin: 20px;
}

Screenshot of how our bare static page looks. There is an h1 header that says 'Aloha. Hello. Salut.' A few other paragraphs make up the page and there is an unordered list that states three little facts about Rough Notation.

Let's Add Some JavaScript

Hold on, this is the juicy part! For our animations to take any kind of effect, we need a JavaScript file. Just create one, and link it to your HTML like you would normally do.

Now let's see how Rough Notation works.

The docs offer a few ways to add the library to our projects. For the sake of simplicity, we will load the ES module directly.

Check out the repo and the docs here.

So essentially, we will add the an extra script tag to our HTML so that it looks like this:

<script type="module" src="https://unpkg.com/rough-notation?module"></script>

Now that Rough Notation is partially present in our project, we can dig into our JavaScript file, and import it. The first line of our JavaScript doc would look like this:

import { annotate } from 'rough-notation';

Now that Rough Notation is fully set up, let's grab what we want to animate from the page. Based on what elements we added classes to, we would have the following:

const header = document.querySelector('.header');
const roughNotation = document.querySelector('.rough-notation');
const link = document.querySelector('.link');
const list = document.querySelector('.list');

The next step is what will bring our page to life. Say, I wanted to highlight the header a light pink color. I would write this code:

const annotation = annotate(header, { type: 'highlight' , color:'pink'});
annotation.show();

We assign the variable annotation to a function called annotate. The annotate function takes two parameters – the element we want to annotate, and an object.

The object can take in a few attributes. In this case we have two: the type of annotation we want on the header, and the color.

And just to mention a few other types of annotations that we can do:

• Highlight

• Circle

• Underline

• Brackets

• Box

• Strike-through

• Crossed-off

Back to our header animation. The last line is annotation.show() which just basically displays our animation.

If we save our page, and check our browser, nothing happens. It was supposed to work (according to the docs), but we get nothing.

I found a solution to the problem on a YouTube video, and in order for us to make the animation come to life, we have to adjust the import line in our JavaScript file.

So you can update it like this:

import { annotate } from "https://unpkg.com/rough-notation?module";

If you are like me, and love opening issues to complain (just kidding) about open source projects, feel free to raise an issue on the Rough Notation repository if the animation doesn't work for you either. But only open an issue if no one has beat you to it yet. So do check recent open and closed issues first. May the best issue opener win :)

If you refresh after fixing the problem we had, our header gets a nice pink highlight. You see it nicely swooshing across the page.

Screenshot of our site now, with the header highlighted in pink.

Nice and pretty, right?

Let's go ahead and add a few more animations:

const annotation = annotate(header, { type: 'highlight' , color:'pink'});
const annotation2 = annotate(roughNotation, {type:'circle', color:'yellow', padding:7});
const annotation3 = annotate(link, { type: 'box' , color:'blue', padding:7});
const annotation4 = annotate(list, { type: 'bracket' , color:'red', brackets:['left', 'right'], strokeWidth:5});

const array = annotationGroup([annotation, annotation2, annotation3, annotation4]);
array.show();

This time, we have added quite a bit. But don't let it get overwhelming. We'll walk through it step by step.

First, we have added padding to our annotation2 animation. Just like we saw with the header, the roughNotation (which is the rough-notation class in our HTML) gets a yellow circle with a padding of 7.

But padding isn't the only new attribute we introduced. annotation4 has a few new things we need to learn about. The object parameter has an attribute, brackets, with an array as value. left and right indicate that we want opening and closing brackets on both sides of the element. It also has strokeWidth, which determines the thickness of the brackets.

Since we have to "show" the animation of each element, which kind of gets boring if we have to animate a lot, I created an array, stored each animation in it, and then "showed" the array all at once. It's neat, and saves a lot of time.

So we've introduced annotationGroup. For this to take effect, we are going to add it to our import line like this:

import { annotate, annotationGroup } from "https://unpkg.com/rough-notation?module";

So... our final site looks like this:

The animations will work better on your browser, because you get to refresh and see them take effect one after the other.

Conclusion

Writing this was fun! And I hope that you not only learned something new, but that you tried it out too.

Make sure to check out the Rough Notation repository and docs, because they cover a whole lot more than what we discussed in this article.

Happy animating!

And if you want to get into coding, it's important to learn and understand some of the popular frameworks – regardless of the field you choose in the industry. ‌‌‌‌But why? ‌‌‌‌

Frameworks help you easily create new apps and ideas without having to write as much code yourself.

They also help eliminate a lot of headaches, so you can spend your time on what really counts.

Basically, they can be a real time saver.

In this article, we will explore:

• What is a framework?
• What is a software framework?
• Examples of software frameworks
• The difference between a library and a framework

So let's get started!

What is a Framework?

_Photo by [Pexels](https://www.pexels.com/@photolisious?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" rel="noopener">Ludvig Hedenborg from <a href="https://www.pexels.com/photo/brown-and-black-axe-3433348/?utm_content=attributionCopyText&utm_medium=referral&utmsource=pexels" rel="noopener)

Imagine, if you will, a guy called John.

John needs to cut down a tree to light his fireplace up to make his family warm.

He goes into the woods, some time passes, and he finally chops down a tree.

Then, he needs to cut the tree into small pieces that can fit in his fireplace.

_Photo by [Pexels](https://www.pexels.com/@ron-lach?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" rel="noopener">Ron Lach from <a href="https://www.pexels.com/photo/axe-stuck-in-trunk-10397927/?utm_content=attributionCopyText&utm_medium=referral&utmsource=pexels" rel="noopener)

Finally, John has successfully cut all the wood needed in the right size to warm his family.

But, what if John had a chainsaw instead?

_Photo by [Pexels](https://www.pexels.com/@karolina-grabowska?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" rel="noopener">Karolina Grabowska from <a href="https://www.pexels.com/photo/crop-lumberman-sawing-log-with-electric-power-saw-4205983/?utm_content=attributionCopyText&utm_medium=referral&utmsource=pexels" rel="noopener)

‌If he had a chainsaw, the work would be done much more quickly and he would lose less time and energy cutting the wood for the fireplace.

Especially if he needed to chop down many trees.

But John likes to use his axe because he says it allows him more control over every bit of wood he chops off.

And with an axe he is able to cut small tree branches and it is better to chop up the wood.

So, with an axe, he can take care of minor things more easily. We don't need a tool like a chainsaw to do it. But when we're cutting down many big trees, it is a good idea to use a chainsaw, because it saves time and effort.

The same applies to coding. When we're programming and we just need to do simple stuff, it is better to just write our own code from scratch and/or get some libraries to help us with that.

But when we need to tackle many big projects, it is better to use a framework, because the project is big and frameworks can save us time.

According to the analogy:

• Cutting the tree with an axe = programming from scratch
• Cutting trees with a chainsaw = Programming with a framework

A chainsaw allows people to more easily cut trees.

A framework allows people to more easily develop programs.

What is a Software Framework?

Just as the chainsaw is a tool to work faster and more efficiently, a software framework is also a “tool” that helps a programmer work faster and achieve more in less time.

Just as there are many types of chainsaws, there are also many types of software frameworks.

Examples of software frameworks

Now I'll share how and where you can use different frameworks in different areas of programming.

Web development frameworks

Web development frameworks make it easier to interact with the website database.

Frameworks automate functions and boring processes used to record and retrieve user-input data.

These frameworks can also make it easier to arrange and organize elements when you're designing the front-end of the site.

Vue is an example of a front-end web development framework.

Front-end means it is only the part the user sees – in other words, the presentation layer or OSI layer 6.

As a web development framework, Vue:

• Can Scale large applications
• Supports typescript
• Has its own router
• Has a state management library

This is one of the most used frameworks in the web development industry, along side with React and Angular.

The following organizations use Vue:

• Upwork
• Alibaba
• Euronews
• Google careers Platform

I recommend Vue because I think it's easier to learn compared to other web development frameworks like React and Angular. Vue is also growing in popularity.

Normally, developers choose which framework they are going to use based on their team experience, the type of project their working on, or the complexity of their projects.

It really depends on your circumstances.

You can check out Vue's official site for more information.

Machine learning frameworks

Machine learning frameworks help programmers by making it easy to implement complex ML algorithms in their programs.

You don't have to create these complex algorithms by yourself. Someone has already done it for you.

This makes your life easier as you just have to get your dataset, optimize the data to be used in the machine learning model, save the model, and run your analysis.

One of the most popular machine learning frameworks worldwide is PyTorch.

PyTorch is a machine learning based on the torch library, developed by Facebook AI research lab.

PyTorch has:

• Open Neural Network Exchange support
• Hybrid Front-End
• Dynamic Computational Graph Support
• Data Parallelism

PyTorch has been used in some cool projects, like:

• Amazon has reduce inference costs by 71% and drive scale out using PyTorch, TorchServe, and AWS Inferentia.
• Stanford PyTorch’s flexibility to efficiently research new algorithmic approaches.
• Used in tesla cars to detect traffic lights, crosswalks, roadsigns...

Many GitHub projects use this framework, from computer vision to natural language processing applications.

I recommending PyTorch because it is easy to learn compared to other machine learning frameworks, it's written in Python, it has a big community around it, and so much more!

You can also check out TensorFlow and sci-kit-learn, as they are also very popular.

Just keep in mind that TensorFlow and sci-kit-learn are both libraries, not frameworks. We'll discuss the difference more below.

In general, companies use TensorFlow, while machine learning researchers use PyTorch.

This is mainly for three reasons:

• Python's API hasn't changed much over the years compared to TensorFlow, so the code from some months back is almost the same in PyTorch. In Tensofrlow, it may be different or even not run at all.
• The Tensorflow API has changed, but the documentation has not changed much, making it difficult for researchers to find online help.
• Most research done by big companies is in PyTorch.

So, if you are reading research in advanced stages, most of the code you see will be in PyTorch.

There are many more reasons for this, but these are just some examples.

Here is the website for PyTorch:

Mobile development frameworks

Mobile development frameworks help programmers a lot by automating many tasks that would otherwise make maintaining projects a hassle.

For example, instead of using 50 lines of code to create a button or to better navigate the space in a screen, frameworks let you drop some button code in, ready to apply to your app.

With a framework a lot of that work is already done for you.

React native is a mobile development framework based on the React library.

This framework comes from the web version of React.

This mobile framework was one of the most popular in the world from 2019 to 2021.

Its main features are:

• Seamless Cross-Platform Development
• Fast Refresh
• Code Reusability
• Improved UI/UX
• Hot Reload

Just as with PyTorch, React Native has also been used to develop many projects:

• Instagram
• Airbnb
• Uber eats
• Pinterest

I recommending React Native because it's based on React.

And if you know JavaScript and React well, you can easily develop cross platform apps.

There are also Flutter, kivy, cordova, and many more mobile development frameworks.

Compared to React native, flutter uses the Dart programming language, Kivy uses Python, and Cordova uses HTML, CSS, and JavaScript

With all of these frameworks, the best choice comes down to what knowledge you already have and the constraints placed on you by your company or team.

For example, if you already know how to use Python and want to develop a small personal project, maybe the best choice is Kivy.

If you join a company and work on the front end with React, is best choice is probably React Native.

Since there are many choices, it really come down to your requirements and projects.

Here is the website for React Native:

These are just three types of frameworks you can look into. Also, keep in mind that there are many frameworks. I just showed you some of them here.

What's the Difference Between a Library and a Framework?

If you're new to coding, you might not know the differences between a library and a framework. But they're not the same thing.

A library is code from a collection of files that someone wrote pre-made for your project.

Like using a shovel. You can use it to dig whatever you want.

Photo by Anna Tarazevich: https://www.pexels.com/photo/a-shovel-on-brown-dirt-ground-7299923/

A framework is like using an excavator. While you can dig more dirt with an excavator, you only use it for specific (big) construction projects.

Photo by Ilya: https://www.pexels.com/photo/construction-vehicles-at-work-5328418/

With a library, you are in control of the code. You use the library to add new features to help your project

With a framework, you are limited by it. You can only work with the "space" the framework gives you. There are also technical reasons for this, which you can read more about in this article.

Should I use a framework or library for my project?

It depends on the complexity of your project, who or what teams will maintain it, and so on.

By analogy, imagine that one of John's hobbies is wood carving.

To do that, he needs to use a simple set of tools to cut wood. He cannot use his axe.

While it can help in some phase of his project, it can also, by accident, destroy the project. It can't work in fine enough detail.

So in this case, the best thing to do is to do everything from scratch. The same applies to programming.

If you want to do a simple project, but need to use function you don't know how to create, you should use libraries.

If you want to work on a complex project where there are a lot of things you don't currently understand, a framework might help you get going.

Also keep in mind that if you work at a big company you might write the code without using any frameworks at all. This way, there is more space for programmers and engineers to develop projects without any limitations.

In many cases, simple programming projects are better the fewer library dependencies they have.

And in general, I believe that the more you code your projects yourself, the better the project is. At least in most cases. :)

Wrapping up

Great! In this article you have learned:

• What a software framework is
• 3 different software frameworks and how to learn more about them
• The differences between a software framework and software library

Building a CSS library might seem like something you'd do out of pure curiosity, just to learn and explore. But it can be so much more than that.

I've seen custom-built CSS libraries used everywhere from big organisations to scrappy young startups.

What is a CSS Library?

You can think of a CSS library like a theme that you can use across multiple projects. It's helpful if you don't want to repeat the styling every time or copy-paste your code. It's also useful if you want to be consistent across your web apps (which is good for your brand).

So, a shared CSS library/theme will increase your efficiency and development speed and it can help you scale your product while maintaining consistency. This can also be a part of a more extensive design system.

The focus of this post will be more on building the CSS library rather than styling it. The output will be a library with a concept similar to bootstrap, where you can use CSS classes and style the associated HTML element.

So how can we build this kind of library, and what tools do we need to use?

Below is a summary of what we'll build:

• Create a library build with Vite, not a web app build
• Handle static assets used in your CSS file
• Use SASS instead of CSS when building the library
• Package the library with npm

How to Set Up the Project

We will use Vite to build our CSS library. Then we'll package it with npm, and finally use it in a new front-end project.

Vite is a dev server and a build tool that makes implementing web projects a fast and smooth experience.

Follow these steps to get started:

• Run npm init @vitejs/app
• Enter a project name
• Select a framework (Vanilla, Vue, React, etc.) – here we will choose "vanilla" as we're focused on CSS

The entry to the project is index.html. We can use this file to test what we're building. But it will not be packaged as part of the library we're creating.

How to Update the Boilerplate Code

First, let us tidy up the existing boilerplate code.

We'll update the HTML file to include a button and a div file with a logo in the background like this:

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <link rel="icon" type="image/svg+xml" href="favicon.svg" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Vite App</title>
    </head>
    <body>
      <div id="app">
        <div class="logo"></div>
        <button class="tomato">Click me</button>
      </div>
      <script type="module" src="/src/main.ts"></script>
    </body>
  </html>

Then, under the "src" directory, delete the contents of the main.ts file, keeping the first line that imports style.css

Next, in the style.css file, add the following code:

  .tomato {
  background-color: tomato;
  }
  .logo {
  background: url(/logo.png) no-repeat;
  height: 300px;
  }

We need to copy the logo.png file under the root folder of the project (feel free to use any other image instead of logo.png and change the height accordingly).

How to Build Our CSS Library

Before creating a build, let's run the app locally. In your terminal:

• Navigate to the root folder of your project
• Run npm install to install the project dependencies
• Run npm run dev to start the local server

Open the app in your browser: http://localhost:3000 (usually, it's on port 3000 unless that port's already being used by another app).

Now it's time to build the project, so just type npm run build. This will create a dist folder with the following files:

How to Configure the Build

The generated folder looks like a build for a web app that needs to be hosted and served. But we're looking to build a library instead. So we need to add some configurations to achieve that:

At the root level of your project, create a new file config.vite.js:

  import { defineConfig } from "vite";
  import path from "path";

  module.exports = defineConfig({
  build: {
      lib: {
      entry: path.resolve(__dirname, "src/main.ts"),
      name: "MyCssLib",
      },
  },
  });

Run npm run build again. Notice the new structure of the dist folder:

In this case, we no longer have an HTML file in the bundle, and our styles are still within a styles.css file. But you'll see here that the logo file we are referencing in our CSS file is no longer there.

What happened here is that Vite inlined the assets as a base64 data URL. So using this new CSS file will still work properly – similar to when referencing the asset file:

This is cool, but it might cause a problem in larger projects where the CSS file might become very big if it had multiple referenced assets.

How to Handle the Assets

Vite offers a simple way to handle assets, where you keep the same file and the path referenced in CSS still works.

On the root of your project, create a public folder and move the logo.png file into it. The local web app will still recognise the logo (check that this is still working on http://localhost:3000).

Run npm run build again. The new dist folder will look as follows:

Notice that the logo file is still there at the root level. If you open the CSS file, it will be referencing that same logo file.

It's convenient here to have an assets folder to contain all of your assets. You can create this folder under the public directory. Remember to update the path to the assets in your CSS file (from /logo.png to /assets/logo.png in this case).

How to Use SASS for Styling

Devs often use SASS for styling because it provides a lot of flexibility and organisation. Vite handles SASS out of the box. Let's check it out:

Install SASS by running npm install sass. Under the "src" folder, change the name of the style.css file to style.scss

Next, add some SASS changes to the style.scss file. For example, use a color variable:

  $color: tomato;

  .tomato {
  background-color: $color;
  }

Then you'll update the "main.ts" file to point to style.scss instead of style.css.

Run npm run build to create a new build, and check the "style.css" file that got generated in the "dist" folder – it has the correct CSS:

  .tomato{background-color:tomato}

How to Package the Library

Now it is time to package the library (whatever got generated in the dist folder). We will use npm to do this.

First, you need to update the "package.json" file to include a new property called files. According to the npm documentation, the files field is an array of file patterns that describes the entries to be included when your package is installed as a dependency.

We need only to package the generated CSS file, so the additional entry in the "package.json" file will be files: [dist/style.css].

Next, you'll run npm pack. This will create a new file. In this case, "vite-CSS-lib-0.0.0.tgz".

How to Use the Package

Start by creating a new project (which you can do in the same way we started with Vite). Once it's done, follow these steps:

• Install the newly created package: npm install <path-to-lib>/vite-css-lib-0.0.0.tgz
• In your "main.js" file, import the CSS file: import 'node_modules/vite-css-lib/dist/style.css
• In your "index.html" file, add a button with a "tomato" class: <button class="tomato">Submit</button>

Run your app. It should have a button with a tomato background colour.

Things to Improve in the Library

Of course, this isn't a finished product – it can always be improved.

You can start by exporting the SASS files rather than a compiled CSS file so that apps depending on your library can use SASS directly. You can do this through a Vite/Rollup plugin: https://vitejs.dev/guide/api-plugin.html

Also, when you're packaging the library with npm, everything within package.json will be included in the package. You can tidy up the package.json file to stop including any unnecessary scripts/dependencies. You can read more about how to do this here.

Finally, set up a bundle with a JS file that exports the created CSS file to enable importing the library without having to reference node_modules/lib/style.css.

I hope this article was helpful. How would you enhance this process? How would you build a CSS library?

In this article, we're going to break down five libraries you need for your React projects.

Each of them will cover virtually every major tool you need, plus we'll cover what are the best ones to choose in 2021 and beyond.

Let's dive right in!

1. A Quicker Create-React-App

If you want to create a React project, you probably reach for a tool like Create-React-App.

While Create-React-App remains an amazing tool and allows you to create a React project by running a single command, there is a new competitor to it that you should know about called Vite.

Create-React-App uses Webpack under the hood to build our React code for development. But build tools have emerged that compete with Webpack in speed.

Vite is one such build tool that uses a faster bundler called esbuild. In short, it makes use of the browser's native ES modules to make for a quicker development experience.

How much faster is Vite? See for yourself!

Here's a quick comparison of starting up a Vite project (right) versus a Create-React-App project (left).

Vite is many times faster than Create-React-App when running React in development.

If you're annoyed at times with how long Create-React-App can take to start up, definitely check out Vite.

On top of that, I'd highly recommend the tool Create-Next-App.

This allows us to create a next JS project very rapidly. And yes, Next.js is a framework, but it is a React framework that needs drastically fewer dependencies. In fact, it just needs the dependencies React, React DOM, and Next.

Be sure to check out Vite and Create Next App when creating your next React project.

2. A (Better) Data Fetching Library

When it comes to basically any React application, we have to manage some server state.

This means we're fetching data from an external server (like an API) and we're bringing that data into our app, which is then combined it with the local state that we have across our app's components.

Many React developers, no matter their skill level, can have a hard time figuring out how to manage server state with their local state. Most developers resort to a library like Redux as a solution.

In the past year, a couple of libraries have emerged that make it very easy to manage server state within our React components. These are React Query and SWR.

They help us with fetching data by giving us some very helpful custom hooks. But what is most important about them is that they have their own internal cache.

This built-in cache allows us to very easily integrate external data with our app. We assign each query to a custom key. To read or update any data we have fetched, we just need to reference that key!

Here is a simple example of how you can use React Query. We are fetching post data from an API, whose value we assign to the custom key "posts".

In addition to improve our state management, fetching data is so much easier. They include a lot of great tools that allow us to do things like refetch queries, create paginated queries, infinite queries, and much more.

In short, if you're fetching data in your React application across multiple components, definitely use one of these newer data fetching libraries.

If you're looking for the most in-depth and sophisticated data fetching library, use React Query. SWR is a great choice as well, albeit with a slightly smaller list of tools.

3. A Dead-Simple State Management Library

When it comes to managing global app state, Redux has always been the go-to choice.

It has helped React developers separate state values into one shared object value, which can be read and updated in any component in our application.

Redux, however, comes with some conceptual baggage. To properly setup Redux and manage our state, we must understand and write separate actions, reducers and selectors.

There are some new competitors to Redux that seek to give us virtually all of the benefits of the library with none of the difficulty. These are the libraries Zustand and Jotai.

They're both very similar, and what's powerful about them is that they were created with a hooks-first approach to working with state. This means that once you create your store, you can read any of its value by calling it as a hook.

Here's a quick example of how to create and use a Zustand store as a hook to create a simple counter application.

Zustand and Jotai make state management simpler due to the fact that you do not need to separate your store into actions, reducers, and selectors.

If you want to update state, write a function in your store to do so and use it in your component. If you want to select a slice of your state, use your store as hook and grab the property of the state object you want. It's that simple!

Plus, you do not need any additional libraries to perform async operations (unlike Redux, which require Redux Thunk or Redux Saga).

Finally, you do not need to wrap your entire component tree with a context provider, so there is basically no setup required, other than creating your store and using it in your components.

In short, if you're having trouble with understanding Redux or want more freedom in your state management, check out Zustand or Jotai.

4. A Powerful Component Library

React was made to create impressive user interfaces. As a result, we need libraries that help us achieve that end.

There are tons of component libraries that give us customized well designed, components right out of the box. However, with all of this diversity which ones do you pick?

If you want to be able to build apps that look great and are equally functional, you can check out extensive, well-maintained libraries like Ant Design, Material UI, and Chakra UI.

All of these libraries have a ton of components and even dedicated icon libraries. But arguably what is most important about them is that they have an intuitive syntax that allows us to build attractive components more easily.

Here is a quick example of building a simple UI with Ant Design.

Most developers pick component libraries for their appearance and what components they feature, but the best libraries also include additional tools that make our apps for functional.

Here is one such custom hook (useClipboard) from Chakra UI that allows us to copy text to our users' clipboard.

I've selected these because not only do I find them to be visually appealing but they also have a great deal of components that will suit virtually every use case you have.

The worst thing to happen is when you have a component library once you are midway into building your app is realizing it doesn't have all the tools that you need.

Check out the component libraries Ant Design, Material UI or Chakra UI for your next project. Or use a CSS-in-JS library like Emotion or Styled Components if you are interested in writing styles by hand.

5. A Hook-Based Form Library

Every React application you build will probably have a form. Needless to say, building forms are a pain!

Not only do you have to create the form itself, but you also have to add tricky things like input validation and error handling.

The best form libraries you can use in 2021 are React Hook Form and Formik.

With the help of their built-in hooks, they make it incredibly easy to build reusable, functional forms. Even forms that have complex conditions, such as fields which are dependent upon one another or that require asynchronous validation.

It worth noting that Formik has changed in that we no longer need to use the traditional render props pattern that it previously utilized.

With Formic you can use a custom hook from the Formik package called useFormik which allows us to build our forms with the help of a custom hook of the same name.

Here's a basic form made with useFormik.

 import React from 'react';
 import { useFormik } from 'formik';

 const SignupForm = () => {
   const formik = useFormik({
     initialValues: {
       username: '',
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="name">Username</label>
       <input
         id="username"
         name="username"
         type="text"
         onChange={formik.handleChange}
         value={formik.values.username}
       />
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />
       <button type="submit">Submit</button>
     </form>
   );
 };

It's worth noting that the only thing that you might need on top of these libraries is a validation library.

Both Formik and React Hook Form are meant to integrate with validation libraries very easily such as the library Yup. How to do so is laid out very easily in their documentation.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

The answer to this question is essential for any React developer, regardless of their skill level. This is because it indicates what they must know and how they must work in developing any React application.

Whether you are a new or an advanced React developer, I hope this thoughtful analysis will improve your own development process as you build your next React project.

Why is React a library and not a framework?

React was made to build full-fledged web applications. As a result, it's often compared with other tools that developers use to build apps, like Angular, Vue, and Svelte.

React is written in JavaScript and is used to make better JavaScript applications. We refer to React specifically as a library.

But what makes React a library and not a framework?

The reason becomes clear when we look at other similar tools that are used to create complete web applications.

Let's look at a project like Angular, which shares the same purpose as React (to create single-page web apps). What sets it apart is the fact that when you set up an Angular project, it is bootstrapped with nearly every single thing that you'll need to make a complete, large-scale app.

Many developers like to refer to frameworks or similar solutions as having "batteries included."

Frameworks are a common choice for companies and anyone looking to make enterprise JavaScript applications, because they include resources that a large-scale application would likely need. This includes built-in tools for common tasks like creating forms, running automated tests, making network requests, and much more.

In short, everything that you need to make a complete application is included in your Angular project when it's generated. But that is not the case with React.

React is fundamentally "unopinionated"

While popular tools have emerged like Create React App, which allow you to create a complete React project in a single command, React is often referred to as "unopinionated."

What does it mean for React to be unopinionated?

The React and React DOM libraries give us the means of building a user interface with the JSX syntax, plus powerful state management tools via hooks, among other things.

However, React itself does not include many of the React-specific libraries you're going to need for most projects. Angular and Vue, by comparison, include many more tools all bundled within the core package itself.

Many developers consider this discussion of what is and isn't a library to be trivial. But it has real consequences for our development process. In other words, because React is a library and not a framework, becoming a skilled React developer entails having a good knowledge of third-party React libraries.

Since React is a library, you must choose the tools on your own

That means, in order to build complete React applications, you will need to choose these packages and tools on your own.

Here are a few examples of decisions that I often need to make when I'm building a React application myself:

For a form library, I have to decide whether I want to use the package React Hook Form or Formik. These are both React-specific form libraries to add important features to our forms like validation.

For testing my React application, I might use either React Testing Library, Jest, or some combination of the two.

For making network requests, I might need to choose between the Fetch API and Axios. I might also need to decide if I want to add an additional library to make managing my server state easier, such as React Query or SWR.

The tools you choose depend on your app and knowledge of them

This question of whether React is a library or framework is important because any React developer must know what their choices are and which choice to make given the type of React application they're building.

If you're building an app without many forms, you might not need a form library at all. If you're more confident with the Fetch API, you might use that over something like Axios.

It really depends not only on what the demands of the app are, but also on what your preferences are as a developer. This is arguably an advantage that React has as a library and why I believe it's very popular among newer developers. It doesn't lock you into one choice or hold you to any specific libraries other than React itself.

You're able to make your own decisions, and you're able to have more freedom overall, as a developer.

That being said, even though React is not a framework this does not diminish its presence in the corporate realm. It's still used to build complex and impressive applications of all kinds. There are many lists of the large-scale React applications that businesses have made and which you likely use on a daily basis.

You need to keep up with emerging libraries

If we were talking about which form library to choose two years ago, I would likely have included Redux Form. As for a data fetching library, I couldn't have mentioned React Query or SWR, because they weren't created (or hadn't gained much traction), until the last year or so.

Because React apps are often reliant upon third-party libraries, newer libraries come about that improve upon the old ones. Individual developers and teams transition to different tools to get the job done and the ecosystem changes as a whole.

Like it or not, React being a library and not a framework entails a large, shifting network of other libraries we must be aware of to build our projects. Some of which may fall out of favor and be replaced by others or may become deprecated and no longer supported as open-source projects.

In short, React being a library may require us to pay more attention to what is going on around React, as compared to if it was a framework.

Wish React was a framework? There are many!

It's worth noting that there are frameworks out there that are based upon React.

While React itself is just a library, many React-based frameworks have cropped up in recent years to provide developers with a more powerful set of built-in tools. These allow you to build projects faster without needing as many third-party libraries.

Some of the most popular of these frameworks include Next.js, Gatsby, and Redwood.js, all of which are used to create full-scale dynamic and static React applications.

This is, in my opinion, the great advantage of frameworks – you do not have to make as many choices throughout the development process.

Use React's flexibility to your advantage

Be aware that going forward, there is a robust ecosystem of React-focused libraries that you can add to your React project to achieve whatever you're looking for, from the most general tasks to the most specific.

This is thanks to React's popularity and widespread usage. But also note, especially if you're coming from an opinionated framework like Angular or Vue, that there are many React-based frameworks that you can rely upon and learn about to build equally functional and featureful applications as well.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

I chose these libraries because not only do they help us build functional and impressive-looking applications, but they also allow us to do so faster, easier, and with less code.

In this guide I'm going to show you how to get up and running with each of these libraries from scratch and integrate them into your projects today.

1. React Query

Fetching data with React is generally a process that involves a lot of code.

You often need to use the useEffect hook in combination with useState to manage the fetched data. This requires a lot of boilerplate that we have to write in every component in which we want to fetch data.

React Query can help you cut down on the code you write when making network requests with React. All of this React code that we had to write before can be replaced with the hook useQuery. From it we get back all of the data that we need without having to declare a state variable:

However, making data fetching easier only covers a small slice of what React Query does. What makes it a very powerful library is that it caches (saves) requests that we make. So in many cases if we've requested data before, we don't have to make another request, we can just read it from the cache.

This is immensely helpful because it cuts down repetition in our code, reduces the load we put on our API, and helps us manage our overall app state. If you pick any library to start adding to your projects today out of this list, make it React Query.

2. Ant Design

When it comes to making impressive-looking React apps, there are many helpful component libraries that allow us to quickly style our applications with the help of pre-made components.

There are lots of component libraries out there, but few that are as sophisticated and well designed as one called Ant Design. If you can think of a type of component to include within your React app interface and design, Ant Design almost certainly has it:

Using a component library like Ant Design speeds up our development time by reducing the amount of often unreliable styles that we have to write ourselves.

Additionally, these pre-made components provide functionality that would often be redundant to create ourselves, such as a common modal or tooltip. In most cases, we should opt for the reliable, proven solution rather than attempting to reinvent the wheel.

If you're thinking of building an application today and are looking for a solid component library, go with Ant Design. It has virtually every feature that you would need out of a component library, plus great customizability that serves any app feature you might consider implementing.

3. Zustand

When it comes to managing state, React developers are often given two familiar choices: Redux or React Context.

Redux has been the go to third-party library that React developers use to manage state. But with the arrival of React Context in React version 16, we have an easier way to manage state by passing it around our component tree.

If you're looking for a library with all of the functionality and power of Redux, with the simplicity of React Context, look at the library Zustand. It's incredibly easy to get started with, as you can see in the example below:

It involves using the create function to make a dedicated state object that can include any state values and functions to update that state as we need. It can all be created within a few lines of code.

Plus, there's no need to use any context provider to pass your state to your app components. All you need to do is create a slice of state, call that created state as a hook, and receive whatever state variables and functions you've declared on the object within your React components.

Give Zustand a shot the next time you are looking for a more complex state solution like Redux for your application – you'll love it.

4. React Hook Form

When it comes to building forms in React, you probably know how tedious it can be to perform basic tasks like validating inputs, plus managing all the form and error state.

Perhaps the most user-friendly form library available today is React Hook Form. All the functionality that you need in a form library is provided in one simple hook, called useForm, and enables you to create forms as sophisticated as you like.

It takes control of managing our form state internally, gives us easy helpers to display errors for the appropriate input, and applies validation rules without any external libraries such as Yup – along with handling the submission of our form:

When it comes to building functional forms, you want a library that's easy to use and does not add too much code to your components. According to these two criteria, React Hook Form is arguably the best React form library out there.

5. React Responsive

There's no question – every React application should be created for users on different devices and needs to be responsive. Meaning, it needs to adjust the styles and appearance according to the screen size or device that your users are on.

While media queries have typically been used in CSS stylesheets to hide and display different elements, the best React-based library to manage visibility or styles of React components is React Responsive.

It gives us a convenient useMediaQuery hook that enables us to pass in very precise conditions to determine whether users on a certain type of screen are using a certain device. Then they'll be able to adjust our user interface accordingly:

For making any React applications responsive without the use of CSS, be sure to check out the React Responsive library.

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Click to get started

Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT. And with the recent SpaceX Dragon launch, JavaScript is even in space.

One of the reasons for its popularity is the availability of a large number of frameworks and libraries. They make development much easier compared to traditional Vanilla JS development.

There are libraries for almost anything and more are coming out almost every day. But with so many libraries to choose from it becomes difficult to keep a track of each one and how it might be tailored specifically to your needs.

In this article, we will discuss 10 of the most popular JS libraries which you can use to build your next project.

Leaflet

Leaflet

I think Leaflet is the best open source library for adding mobile-friendly interactive maps to your application.

Its small size (39kB) makes it a great alternative to consider over other map libraries. With cross-platform efficiency and a well-documented API, it has everything you need to make you fall in love.

Here is some sample code that creates a Leaflet map:

var map = new L.Map("map", {
    center: new L.LatLng(40.7401, -73.9891),
    zoom: 12,
    layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});

In Leaflet, we need to provide a tile layer since there isn't one by default. But that also means that can choose from a wide range of layers both free and premium. You can explore various free tile layers here.

Read the Docs or follow the Tutorials to learn more.

fullPage.js

This open-source library helps you create full-screen scrolling websites as you can see in the above GIF. It's easy to use and has many options to customize, so it's no surprise it is used by thousands of developers and has over 30k stars on GitHub.

Here is a Codepen demo that you can play with:

You can even use it with popular frameworks such as:

• react-fullpage

• vue-fullpage

• angular-fullpage

I came across this library about a year ago and since then it has become one of my favorites. This is one of the few libraries that you can use in almost every project. If you haven't already started using it then just try it, you will not be disappointed.

anime.js

anime.js

One of the best animation libraries out there, Anime.js is flexible and simple to use. It is the perfect tool to help you add some really cool animation to your project.

Anime.js works well with CSS properties, SVG, DOM attributes, and JavaScript Objects and can be easily integrated into your applications.

As a developer it's important to have a good portfolio. The first impression people have of your portfolio helps decide whether they will hire you or not. And what better tool than this library to bring life to your portfolio. It will not only enhance your website but will help showcase actual skills.

Check out this Codepen to learn more:

You can also take a look at all the other cool projects on Codepen or Read the Docs here.

Screenfull.js

screenfull.js

I came across this library while searching for a way to implement a full-screen feature in my project.

If you also want to have a full-screen feature, I would recommend using this library instead of Fullscreen API because of its cross-browser efficiency (although it is built on top of that).

It is so small that you won't even notice it – just about 0.7kB gzipped.

Try the Demo or read the Docs to learn more.

Moment.js

Moment.js

Working with date and time can be a huge pain, especially with API calls, different Time Zones, local languages, and so on. Moment.js can help you solve all those issues whether it is manipulating, validating, parsing, or formatting dates or time.

There are so many cool methods that are really useful for your projects. For example, I used the .fromNow() method in one of my blog projects to show the time the article was published.

const moment = require('moment'); 

relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); 
// a year ago

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

// French
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); 
//il y a un an

// Spanish
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); 
//hace un año

Moment.js Homepage

Read the Docs here.

Update September 2020: Moment.js has entered maintenance mode. Read more about it here. You may want to explore alternatives such as Day.js or date-fns.

Hammer.js

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

$(element).hammer(options).bind("pan", myPanHandler);

Read the Docs here.

Masonry

Masonry

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in on the web page.

And here is the code for the above:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  itemSelector: '.grid-item',
  columnWidth: 400
});

var msnry = new Masonry( '.grid');

Here is a cool demo on Codepen:

Check out these Projects

• https://halcyon-theme.tumblr.com/

• https://tympanus.net/Development/GridLoadingEffects/index.html

• https://www.erikjo.com/work

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

Read more about it here.

slick

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Autoplay

Check out the demos here.

Popper.js

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.

How can we take advantage of the power of Chakra UI to build great web apps?

• What is Chakra UI?
• What makes Chakra UI so great?
• What are we going to build?
• Step 0: Creating a new React project with Next.js
• Step 1: Installing and configuring Chakra UI in Next.js
• Step 2: Adding Chakra UI components to a React app
• Step 3: Making responsive components with Chakra UI
• Step 4: Customizing the default Chakra UI theme

What is Chakra UI?

Chakra UI is a component library for React that makes it easy to build the UI of an app or website.

Their goal is to provide a simple, modular, and accessible set of components to get up and running quickly.

What makes Chakra UI so great?

To start, by default Chakra strives to make each component accessible. It’s a critical part of application development that’s often overlooked, and the Chakra maintainers have gone out of their way to ensure the components follow the WAI-ARIA guidelines.

Chakra also includes a simple API allowing developers to get productive. It allows people and teams to make inclusive apps without having to worry about building a bunch of components themselves.

For styling and customization, Chakra uses Emotion under the hood to provide developers the ability to style their components right inside of their JavaScript with style props. It comes with a default theme, but allows the ability to easily override it with custom settings.

What are we going to build?

To get a good idea of how Chakra works, we’re going to essentially rebuild the default Next.js template with Chakra UI components.

This will help us understand a few important concepts, such as how to use Chakra UI with Next.js, how to add custom styles with props, and how to customize the Chakra UI theme.

The concepts here can apply pretty much to any React app, though the examples will be slightly specific to Next.js.

Step 0: Creating a new React project with Next.js

To get started, we need a React app. We’re going to use Next.js as our framework which will give us the ability to easily spin up a new app.

Once inside the directory you want to create your project in, run:

yarn create next-app my-chakra-app
# or
npx create-next-app my-chakra-app

Note: feel free to change my-chakra-app to whatever you want to name the project directory.

And once that’s finished, you can navigate into that directory and start the project with:

yarn dev
# or
npm run dev

That should spin up your development server at http://localhost:3000 and we should be ready to go!

Default Next.js template

Follow along with the commit!

Step 1: Installing and configuring Chakra UI in Next.js

Next, let’s install Chakra UI.

Inside of your project directory, run:

yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming
# or 
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

This will install Chakra UI and its dependencies, which includes Emotion, as it relies on it for the styling.

To get Chakra working inside of our app, we need to configure a Provider at the root of our application. This will allow all of Chakra’s components to talk to each other and use the configuration to maintain consistent styles.

Inside pages/_app.js, first let’s import our Provider at the top:

import { ThemeProvider, theme } from '@chakra-ui/core';

Next, replace the return statement inside of the component with:

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

As you’ll notice, we’re also passing a theme variable to our provider. We’re importing the Chakra UI default theme straight from Chakra and passing it in to our ThemeProvider so all of our components can get the default styles and configurations.

Finally, we want to add a component called CSSReset right as a direct child of our ThemeProvider.

First, add CSSReset as an import:

import { ThemeProvider, theme, CSSReset } from '@chakra-ui/core';

Then add the component right inside ThemeProvider:

<ThemeProvider theme={theme}>
  <CSSReset />
  <Component {...pageProps} />
</ThemeProvider>

And now if we reload the page, we can see that things are looking a little bit different!

Next.js with Chakra UI CSS Reset

The browser comes with a lot of default styles and by default, Chakra UI doesn’t override them. This includes styles like borders on a button element.

While we don’t necessarily need the CSS Reset here, we could override those things manually. This provides us with a foundation where we’ll know that Chakra UI is working as it’s intended to and we can start adding our components.

Follow along with the commit!

Step 2: Adding Chakra UI components to a React app

Now for the fun part. We’re going to use Chakra UI components to try to rebuild the Next.js default template. It’s not going to look 100% exactly like it, but it will carry the spirit and we can customize it as we’d like.

Building the Title and Description

Starting from the top, let’s update our title and description.

At the top of the page, we need to import our Heading component:

import { Heading, Link } from "@chakra-ui/core";

Then let’s replace the <h1> with:

<Heading as="h1" size="2xl" mb="2">
  Welcome to Next.js!
</Heading>

Here, we’re using the Heading component which we then set “as” an h1. We can use any HTML heading element tag name, but since we’re replacing an h1, we want to use that.

We’re also setting a size attribute, which allows us to control how big out heading is, as well as mb, which stands for margin-bottom, allowing us to add some space below.

And we can already see our page is looking more like the default template.

Chakra UI Heading component

We also want to add back our link.

Add Link to our import statement at the top and then inside of our <Heading> component, replace the Next.js text with:

<Link color="teal.500" href="https://nextjs.org">Next.js!</Link>

Chakra’s Link component creates a link as expected, but then allows us to use the style props to customize it. Here, we’re using the color variable teal.500 that Chakra provides to change our link to Chakra’s colors.

And we can see that we have our Next.js link!

Chakra UI Heading with Link component

The last piece of the header is the description. For that, we want to use the Text component.

Add Text and Code to the import statement and replace the description with:

<Text fontSize="xl" mt="2">
  Get started by editing <Code>pages/index.js</Code>
</Text>

We’re using the Text component to recreate a <p> tag and the Code component to create our <code> tag. Similar to our Heading component, we’re adding a fontSize to make the font bigger and mt which stands for margin-top to add some space above it.

And now we have our header!

Chakra UI Text component with Code

Replacing info cards with Chakra UI components

For each of our cards, we can use the same concepts as we did with the header to recreate each of our boxes.

To start, add an import for the Flex component and replace the tag <div className={styles.grid}> with:

<Flex flexWrap="wrap" alignItems="center" justifyContent="center" maxW="800px" mt="10">
  ...
</Flex>

Make sure to leave all of the cards inside of the Flex component. The Flex component will recreate our grid by adding Flexbox along with the same properties that were on the grid before.

At this point, it should exactly the same as it did before.

Next, add Box to the import statement and then replace the first card with:

<Box as="a" href="https://nextjs.org/docs" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Documentation &rarr;</Heading>
  <Text fontSize="lg">Find in-depth information about Next.js features and API.</Text>
</Box>

Similar to our Heading component, we’re setting our Box component “as” an <a> tag allowing it to serve as a link. We then configure our style props to replicate our cards.

Inside of that, we use the Heading and Text component to recreate the actual content of the cards.

And after only changing the first card, we can now see the changes:

Chakra UI Box component

Now, we can go back and replace the other three cards with the same components to finish recreating our grid.

For fun, we can add a 5th card that links to Chakra UI:

<Box as="a" href="https://chakra-ui.com/" p="6" m="4" borderWidth="1px" rounded="lg" flexBasis="45%">
  <Heading as="h3" size="lg" mb="2">Chakra UI &rarr;</Heading>
  <Text fontSize="lg">Build accessible React apps & websites with speed.</Text>
</Box>

And with all of our changes, we can now see our recreated Next.js starting template!

Chakra UI recreating Next.js grid

Follow along with the commit!

Step 3: Making responsive components with Chakra UI

Part of what the default Next.js grid was able to provide was the ability for the cards to expand to full width once the size of the browser becomes small enough. This is particularly relevant at 600px, which typically means someone’s on a mobile device.

If we look at our page on a mobile device, we can see that our cards aren’t filling up the entire width.

Chakra UI default without responsive

Chakra allows us to set responsive styles with its baked in sizing, allowing us to easily recreate our responsive grid cards.

To do this, instead of passing in a single value to our style props, we can pass in an array.

For instance, on each of our Box components, let’s update the flexBasis prop to:

flexBasis={['auto', '45%']}

Here, according to Chakra’s default responsive breakpoints , we’re saying that by default, we want our flexBasis to be set as auto. But for anything 480px and larger, again which is Chakra’s default first breakpoint, we set it to 45%.

Chakra considers its responsive styling to be mobile first, which is why you see the 480px act as a minimum size, not a maximum size.

And with that change, we can now see that on a large device, we still have our grid.

Chakra UI components on large device

But now on mobile, our cards take up the entire width!

Chakra UI components on small device

Using the array pattern works for all of the breakpoints, so if you wanted more control over your styles, Chakra lets you do that.

Follow along with the commit!

Step 4: Customizing the default Chakra UI theme

While Chakra provides a pretty great default theme, we also have the ability to customize it to our liking to match our brand or personal taste.

For instance, while the teal that we used for our Heading link is great and uses Chakra’s styles, what if I wanted to customize all links to use the purple that I use on my website?

To start, Chakra comes with a default purple, so we can update our link to use that purple:

Welcome to <Link color="purple.500" href="https://nextjs.org">Next.js!</Link>

And we see our change.

Making Next.js header link purple with color style prop

That looks great, but let’s update it to the exact purple I use.

Inside of pages/_app.js, we’re going to create a new object at the top of the page, where we spread the default theme creating a new theme object. We’ll also replace the theme prop with our new object:

const customTheme = {
  ...theme
}

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={customTheme}>

If we save and reload the page, it will look exactly the same.

Next, we want to update the colors, so in our custom theme object, let’s add the colors property, where we can then set our custom purple:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: '#692ba8'
  }
}

Note: you’ll see here that we’re also spreading theme.colors. If we don’t, we’ll be replacing the colors object with only the purple value, meaning we won’t have any other colors.

But if we reload the page, our link isn’t purple anymore!

Next.js link with no color

Chakra typically uses ranges of colors which allows us to use different shades of each of the colors. In our Link component, we’re specifying purple.500 which we didn’t set to exist.

So to fix that, we can use a tool like Smart Swatch to get all of our color values that we need and set those in our custom theme object:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    purple: {
      50: '#f5e9ff',
      100: '#dac1f3',
      200: '#c098e7',
      300: '#a571dc',
      400: '#8c48d0',
      500: '#722fb7',
      600: '#59238f',
      700: '#3f1968',
      800: '#260f40',
      900: '#10031a',
    }
  }
}

Tip: Smart Swatch actually lets you copy those values as a JavaScript object, making it easier to paste into our theme!

And now if we reload the page, we can see our purple!

Next.js with custom purple

While we used a range value here, we can also specify color variables without a range.

Say I wanted to leave the default Chakra purple “as is” but provide a way for me to reference my purple.

To do that, I could remove those purple values and add a new custom variable:

const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    spacejelly: '#692ba8'
  }
}

Then update my Link to use that color:

Welcome to <Link color="spacejelly" href="https://nextjs.org">Next.js!</Link>

And we can see that we’re now using our purple without overriding the original:

Next.js with custom color variable

We can apply this to most parts of the styles of Chakra, including Typography and setting custom Breakpoints. It’s another way to make our project custom to our own while still taking advantage of the power of Chakra!

Follow along with the commit!

What else can you do with Chakra UI?

While we went through some simpler examples, it really opens the door to more complex style changes and controls that Chakra provides with its component APIs.

There are also a whole lot of awesome components that you can use to transform your website or application and make development fast and easy!

They even provide recipes that have some examples of how you can combine the components resulting in powerful functionality. This includes a responsive header and even adding animations with Framer Motion.

In this article, I will show you how to embed the JACOB library into your Spring Boot application. This will help you call a COM interface API via the DLL library in your web application.

Also, for illustrative purposes, I will provide a description of a COM API so you can build your application on top of it. You can find all the code snippets in this GitHub repo.

But first, a quick note: at C the Signs we deployed this solution that allowed us to integrate with EMIS Health. It is an electronic patient record system used in primary care in the United Kingdom. For integration we used their provided DLL library.

The approach that I'll show you here (sanitised to avoid leaking any sensitive information) rolled out to production more than two years ago, and has since proven its durability.

Since we recently employed a brand new approach to integrating with EMIS, the old system is going to be shut down in a month or two. So this tutorial is its swan song. Sleep, my little prince.

What is the DLL API?

First, let's start with a clear description of the DLL library. To do this, I prepared a short mock-up of the original technical documentation.

Let's take a look through it to see what the three methods of a COM interface are.

InitialiseWithID Method

This method is a security feature required on-site that lets us obtain a connection to an API server that we want to integrate with the library.

It requires the AccountID (GUID) of the current API user (to access the server) and some other initialization arguments that are listed below.

This function also supports an auto-login feature. If a client has a logged-in version of the running system (the library is a part of that system) and calls the method on the same host, the API will automatically complete the login under that user's account. Then it'll return the SessionID for subsequent API calls.

Otherwise, the client needs to continue with the Logon function (see the next part) using the returned LoginID.

To call the function, use the name InitialiseWithID with the following arguments:

Logon Method

This method determines the authority of the user. The username here is the ID used to log in to the system. The password is the API password set for that username.

In the success scenario, the call returns a SessionID string (GUID) that must be passed into other subsequent calls to authenticate them.

To call the function, use the name Logon with the following arguments:

getMatchedUsers Method

This call lets you find user data records that match specific criteria. The search term can only refer to one field at a time such as last name, first name, or date of birth.

A successful call returns an XML string with the data in it.

To call the function, use the name getMatchedUsers with the following arguments:

DLL Library Application Flow

To make it easier to grasp what we want to implement, I decided to create a simple flow diagram.

It describes a step-by-step scenario of how a web client can interact with our server-based application using its API. It encapsulates interaction with the DLL Library and allows us to get hypothetical users with the provided match term (search criteria):

Application Flow Diagram

Registering COM

Now let's learn how we can access the DLL library. To be able to interact with a 3rd party COM interface, it needs to be added to the registry.

Here's what the docs say:

The registry is a system database that contains information about the configuration of system hardware and software as well as about users of the system. Any Windows-based program can add information to the registry and read information back from the registry. Clients search the registry for interesting components to use.

The registry maintains information about all the COM objects installed in the system. Whenever an application creates an instance of a COM component, the registry is consulted to resolve either the CLSID or ProgID of the component into the pathname of the server DLL or EXE that contains it.

After determining the component's server, Windows either loads the server into the process space of the client application (in-process components) or starts the server in its own process space (local and remote servers).

The server creates an instance of the component and returns to the client a reference to one of the component's interfaces.

To learn how to do that, the official Microsoft documentation says:

You can run a command-line tool called the Assembly Registration Tool (Regasm.exe) to register or unregister an assembly for use with COM.

Regasm.exe adds information about the class to the system registry so COM clients can use the .NET Framework class transparently.

The RegistrationServices class provides the equivalent functionality. A managed component must be registered in the Windows registry before it can be activated from a COM client

Make sure that your host machine has installed the required .NET Framework components. After that, you can execute the following CLI command:

C:\Windows\Microsoft.NET\Framework\v2.0.50727\RegAsm.exe {PATH_TO_YOUR_DLL_FILE} /codebase

A message will display indicating whether the file was successfully registered. Now we're ready for the next step.

Defining the Backbone of the Application

DllApiService

First of all, let's define the interface that describes our DLL library as it is:

public interface DllApiService {

    /**
     * @param accountId identifier for which we trigger initialisation
     * @return Tuple3 from values of Outcome, SessionID/LoginID, error
     * where by the first argument you can understand what is the result of the API call
     */
    Mono<Tuple3<Integer, String, String>> initialiseWithID(String accountId);

    /**
     * @param loginId  is retrieved before using {@link DllApiService#initialiseWithID(String)} call
     * @param username
     * @param password
     * @return Tuple3 from values of Outcome, SessionID, Error
     * where by the first argument you can understand what is the result of the API call
     */
    Mono<Tuple3<Integer, String, String>> logon(String loginId, String username, String password);

    /**
     * @param sessionId is retrieved before using either
     *                  {@link DllApiService#initialiseWithID(String)} or
     *                  {@link DllApiService#logon(String, String, String)} calls
     * @param matchTerm
     * @return Tuple3 from values of Outcome, MatchedList, Error
     * where by the first argument you can understand what is the result of the API call
     */
    Mono<Tuple3<Integer, String, String>> getMatchedUsers(String sessionId, String matchTerm);

    enum COM_API_Method {
        InitialiseWithID, Logon, getMatchedUsers
    }
}

As you might have noticed, all the methods map with the definition of the COM Interface described above, except for the initialiseWithID function.

I decided to omit the address variable in the signature (the IP of the integration server) and inject it as an environment variable which we will be implementing.

SessionIDService Explained

To be able to retrieve any data using the library, first we need to get the SessionID.

According to the flow diagram above, this involves calling the initialiseWithID method first. After that, depending on the result, we will get either the SessionID or LoginID to use in subsequent Logon calls.

So basically this is a two-step process behind the scenes. Now, let's create the interface, and after that, the implementation:

public interface SessionIDService {

    /**
     * @param accountId identifier for which we retrieve SessionID
     * @param username
     * @param password
     * @return Tuple3 containing the following values:
     * result ( Boolean), sessionId (String) and status (HTTP Status depending on the result)
     */
    Mono<Tuple3<Boolean, String, HttpStatus>> getSessionId(String accountId, String username, String password);
}

@Service
@RequiredArgsConstructor
public class SessionIDServiceImpl implements SessionIDService {

    private final DllApiService dll;

    @Override
    public Mono<Tuple3<Boolean, String, HttpStatus>> getSessionId(String accountId, String username, String password) {
        return dll.initialiseWithID(accountId)
                  .flatMap(t4 -> {
                      switch (t4.getT1()) {
                          case -1:
                              return just(of(false, t4.getT3(), SERVICE_UNAVAILABLE));

                          case 1: {

                              return dll.logon(t4.getT2(), username, password)
                                        .map(t3 -> {
                                            switch (t3.getT1()) {
                                                case -1:
                                                    return of(false, t3.getT3(), SERVICE_UNAVAILABLE);
                                                case 1:
                                                    return of(true, t3.getT2(), OK);
                                                case 2:
                                                case 4:
                                                    return of(false, t3.getT3(), FORBIDDEN);
                                                default:
                                                    return of(false, t3.getT3(), BAD_REQUEST);

                                            }
                                        });

                          }

                          case 4:
                              return just(of(true, t4.getT2(), OK));

                          default:
                              return just(of(false, t4.getT3(), BAD_REQUEST));
                      }
                  });

    }
}

API Facade

The next step is to design our web application API. It should represent and encapsulate our interaction with the COM Interface API:

@Configuration
public class DllApiRouter {

    @Bean
    public RouterFunction<ServerResponse> dllApiRoute(DllApiRouterHandler handler) {
        return RouterFunctions.route(GET("/api/sessions/{accountId}"), handler::sessionId)
                              .andRoute(GET("/api/users/{matchTerm}"), handler::matchedUsers);
    }
}

Besides the Router class, let's define an implementation of its handler with logic for retrieving the SessionID and the user records data.

For the second scenario, to be able to make a DLL getMatchedUsers API call according to the design, let's use the mandatory header X-SESSION-ID:

@Slf4j
@Component
@RequiredArgsConstructor
public class DllApiRouterHandler {

    private static final String SESSION_ID_HDR = "X-SESSION-ID";

    private final DllApiService service;
    private final AccountRepo accountRepo;
    private final SessionIDService sessionService;

    public Mono<ServerResponse> sessionId(ServerRequest request) {
        final String accountId = request.pathVariable("accountId");

        return accountRepo.findById(accountId)
                          .flatMap(acc -> sessionService.getSessionId(accountId, acc.getApiUsername(), acc.getApiPassword()))
                          .doOnEach(logNext(t3 -> {
                              if (t3.getT1()) {
                                  log.info(format("SessionId to return %s", t3.getT2()));
                              } else {
                                  log.warn(format("Session Id could not be retrieved. Cause: %s", t3.getT2()));
                              }
                          }))
                          .flatMap(t3 -> status(t3.getT3()).contentType(APPLICATION_JSON)
                                                           .bodyValue(t3.getT1() ? t3.getT2() : Response.error(t3.getT2())))

                          .switchIfEmpty(Mono.just("Account could not be found with provided ID " + accountId)
                                             .doOnEach(logNext(log::info))
                                             .flatMap(msg -> badRequest().bodyValue(Response.error(msg))));
    }

    public Mono<ServerResponse> matchedUsers(ServerRequest request) {

        return sessionIdHeader(request).map(sId -> Tuples.of(sId, request.queryParam("matchTerm")
                                                                         .orElseThrow(() -> new IllegalArgumentException(
                                                                                 "matchTerm query param should be specified"))))
                                       .flatMap(t2 -> service.getMatchedUsers(t2.getT1(), t2.getT2()))
                                       .flatMap(this::handleT3)
                                       .onErrorResume(IllegalArgumentException.class, this::handleIllegalArgumentException);

    }

    private Mono<String> sessionIdHeader(ServerRequest request) {
        return Mono.justOrEmpty(request.headers()
                                       .header(SESSION_ID_HDR)
                                       .stream()
                                       .findFirst()
                                       .orElseThrow(() -> new IllegalArgumentException(SESSION_ID_HDR + " header is mandatory")));
    }

    private Mono<ServerResponse> handleT3(Tuple3<Integer, String, String> t3) {
        switch (t3.getT1()) {
            case 1:
                return ok().contentType(APPLICATION_JSON)
                           .bodyValue(t3.getT2());
            case 2:
                return status(FORBIDDEN).contentType(APPLICATION_JSON)
                                        .bodyValue(Response.error(t3.getT3()));
            default:
                return badRequest().contentType(APPLICATION_JSON)
                                   .bodyValue(Response.error(t3.getT3()));
        }
    }

    private Mono<ServerResponse> handleIllegalArgumentException(IllegalArgumentException e) {
        return Mono.just(Response.error(e.getMessage()))
                   .doOnEach(logNext(res -> log.info(String.join(",", res.getErrors()))))
                   .flatMap(res -> badRequest().contentType(MediaType.APPLICATION_JSON)
                                               .bodyValue(res));
    }

    @Getter
    @Setter
    @NoArgsConstructor
    public static class Response implements Serializable {

        private String message;

        private Set<String> errors;

        private Response(Set<String> errors) {
            this.errors = errors;
        }

        public static Response error(String error) {
            return new Response(singleton(error));
        }
    }
}

Account Entity

As you might have noticed, we've imported AccountRepo in the router's handler to find the entity in a database by the provided accountId. This lets us get the corresponding API user credentials and use all three in the DLL Logon API call.

To get a clearer picture, let's define the managed Account entity as well:

@TypeAlias("Account")
@Document(collection = "accounts")
public class Account {

    @Version
    private Long version;

    /**
     * unique account ID for API, provided by supplier
     * defines restriction for data domain visibility
     * i.e. data from one account is not visible for another
     */
    @Id
    private String accountId;

    /**
     * COM API username, provided by supplier
     */
    private String apiUsername;

    /**
     * COM API password, provided by supplier
     */
    private String apiPassword;


    @CreatedDate
    private Date createdAt;

    @LastModifiedDate
    private Date updatedOn;
}

The JACOB Library Setup

All parts of our application are ready now except the core – the configuration and use of the JACOB library. Let's start with setting up the library.

The library is distributed via sourceforge.net. I did not find it available anywhere on either the Central Maven Repo or any other repositories online. So I decided to import it manually into our project as a local package.

To do that, I downloaded it and put it in the root folder under /libs/jacob-1.19.

After that, put the following maven-install-plugin configuration into pom.xml. This will add the library to the local repository during Maven's install build phase:

<plugin>
   <groupId>org.apache.maven.plugins</groupId>
   <artifactId>maven-install-plugin</artifactId>
   <executions>
      <execution>
         <id>install-jacob</id>
         <phase>validate</phase>
         <configuration>
            <file>${basedir}/libs/jacob-1.19/jacob.jar</file>
            <repositoryLayout>default</repositoryLayout>
            <groupId>net.sf.jacob-project</groupId>
            <artifactId>jacob</artifactId>
            <version>1.19</version>
            <packaging>jar</packaging>
            <generatePom>true</generatePom>
         </configuration>
         <goals>
            <goal>install-file</goal>
         </goals>
      </execution>
   </executions>
</plugin>

That will let you easily add the dependency as usual:

<dependency>
   <groupId>net.sf.jacob-project</groupId>
   <artifactId>jacob</artifactId>
   <version>1.19</version>
</dependency>

The library import is finished. Now let's get it ready to use it.

To interact with the COM component, JACOB provides a wrapper called an ActiveXComponent class (as I mentioned before).

It has a method called invoke(String function, Variant... args) that lets us make exactly what we want.

Generally speaking, our library is set up to create the ActiveXComponent bean so we can use it anywhere we want in the app (and we want it in the implementation of DllApiService).

So let's define a separate Spring @Configuration with all the essential preparations:

@Slf4j
@Configuration
public class JacobCOMConfiguration {

    private static final String COM_INTERFACE_NAME = "NAME_OF_COM_INTERFACE_AS_IN_REGISTRY";

    private static final String JACOB_LIB_PATH = System.getProperty("user.dir") + "\\libs\\jacob-1.19";
    private static final String LIB_FILE = System.getProperty("os.arch")
                                                 .equals("amd64") ? "\\jacob-1.19-x64.dll" : "\\jacob-1.19-x86.dll";

    private File temporaryDll;

    static {
        log.info("JACOB lib path: {}", JACOB_LIB_PATH);
        log.info("JACOB file lib path: {}", JACOB_LIB_PATH + LIB_FILE);
        System.setProperty("java.library.path", JACOB_LIB_PATH);
        System.setProperty("com.jacob.debug", "true");
    }

    @PostConstruct
    public void init() throws IOException {
        InputStream inputStream = new FileInputStream(JACOB_LIB_PATH + LIB_FILE);

        temporaryDll = File.createTempFile("jacob", ".dll");
        FileOutputStream outputStream = new FileOutputStream(temporaryDll);
        byte[] array = new byte[8192];
        for (int i = inputStream.read(array); i != -1; i = inputStream.read(array)) {
            outputStream.write(array, 0, i);
        }
        outputStream.close();

        System.setProperty(LibraryLoader.JACOB_DLL_PATH, temporaryDll.getAbsolutePath());
        LibraryLoader.loadJacobLibrary();
        log.info("JACOB library is loaded and ready to use");
    }

    @Bean
    public ActiveXComponent dllAPI() {
        ActiveXComponent activeXComponent = new ActiveXComponent(COM_INTERFACE_NAME);
        log.info("API COM interface {} wrapped into ActiveXComponent is created and ready to use", COM_INTERFACE_NAME);
        return activeXComponent;
    }

    @PreDestroy
    public void clean() {
        temporaryDll.deleteOnExit();
        log.info("Temporary DLL API library is cleaned on exit");
    }
}

It's worth mentioning that, besides defining the bean, we initialize the library components based on the host machine's ISA (instruction set architecture).

Also, we follow some common recommendations to make a copy of the corresponding library's file. This avoids any potential corruption of the original file during runtime. We also need to cleanup all allocated resources when the applications terminates.

Now the library is set up and ready to use. Finally, we can implement our last main component that helps us interact with the DLL API: DllApiServiceImpl.

How to Implement a DLL Library API Service

As all COM API calls are going to be cooked using a common approach, let's implement InitialiseWithID first. After that, all other methods can be implemented easily in a similar way.

As I mentioned before, to interact with the COM interface, JACOB provides us with the ActiveXComponent class that has the invoke(String function, Variant... args) method.

If you want to know more about the Variant class, the JACOB documentation says the following (you can find it in the archive or under /libs/jacob-1.19 in the project):

The multi-format data type used for all call backs and most communications between Java and COM. It provides a single class that can handle all data types.

This means that all arguments defined in the InitialiseWithID signature should be wrapped with new Variant(java.lang.Object in) and passed to the invoke method. Use the same order as specified in the interface description at the beginning of this article.

The only other important thing we haven't touched on yet is how to distinguish in and out type arguments.

For that purpose, Variant provides a constructor that accepts the data object and information about whether this is by reference or not. This means that after invoke is called, all variants that were initialized as references can be accessed after the call. So we can extract the results from out arguments.

To do that, just pass an extra boolean variable to the constructor as the second parameter: new Variant(java.lang.Object pValueObject, boolean fByRef).

Initializing the Variant object as reference puts an additional requirement on the client to decide when to release the value (so it can be scrapped by the garbage collector).

For that purpose, you have the safeRelease() method that is supposed to be called when the value is taken from the corresponding Variant object.

Putting all the pieces together gives us the following service's implementation:

@RequiredArgsConstructor
public class DllApiServiceImpl implements DllApiService {

    @Value("${DLL_API_ADDRESS}")
    private String address;

    private final ActiveXComponent dll;

    @Override
    public Mono<Tuple3<Integer, String, String>> initialiseWithID(final String accountId) {

        return Mono.just(format("Calling %s(%s, %s, %s, %s, %s, %s)",//
                                InitialiseWithID, address, accountId, "loginId/out", "error/out", "outcome/out", "sessionId/out"))
                   .doOnEach(logNext(log::info))
                   //invoke COM interface method and extract the result mapping it onto corresponding *Out inner class
                   .map(msg -> invoke(InitialiseWithID, vars -> InitialiseWithIDOut.builder()
                                                                                   .loginId(vars[3].toString())
                                                                                   .error(vars[4].toString())
                                                                                   .outcome(valueOf(vars[5].toString()))
                                                                                   .sessionId(vars[6].toString())
                                                                                   .build(), //
                                      new Variant(address), new Variant(accountId), initRef(), initRef(), initRef(), initRef()))
                   //Handle the response according to the documentation
                   .map(out -> {

                       final String errorVal;

                       switch (out.outcome) {
                           case 2:
                               errorVal = "InitialiseWithID method call failed. DLL API request outcome (response code from server via DLL) = 2 " +//
                                       "(Unable to connect to server due to absent server, or incorrect details)";
                               break;
                           case 3:
                               errorVal = "InitialiseWithID method call failed. DLL API request outcome (response code from server via DLLe) = 3 (Unmatched AccountID)";
                               break;
                           default:
                               errorVal = handleOutcome(out.outcome, out.error, InitialiseWithID);
                       }

                       return of(out, errorVal);
                   })
                   .doOnEach(logNext(t2 -> {
                       InitialiseWithIDOut out = t2.getT1();
                       log.info("{} API call result:\noutcome: {}\nsessionId: {}\nerror: {}\nloginId: {}",//
                                InitialiseWithID, out.outcome, out.sessionId, t2.getT2(), out.loginId);
                   }))
                   .map(t2 -> {
                       InitialiseWithIDOut out = t2.getT1();
                       //out.outcome == 4 auto-login successful, SessionID is retrieved
                       return of(out.outcome, out.outcome == 4 ? out.sessionId : out.loginId, t2.getT2());
                   });
    }

    private static Variant initRef() {
        return new Variant("", true);
    }

    private static String handleOutcome(Integer outcome, String error, COM_API_Method method) {
        switch (outcome) {
            case 1:
                return "no error";
            case 2:
                return format("%s method call failed. DLL API request outcome (response code from server via DLL) = 2 (Access denied)", method);
            default:
                return format("%s method call failed. DLL API request outcome (response code from server via DLL) = %s (server technical error). " + //
                                      "DLL API is temporary unavailable (server behind is down), %s", method, outcome, error);
        }

    }

    /**
     * @param method     to be called in COM interface
     * @param returnFunc maps Variants (references) array onto result object that is to be returned by the method
     * @param vars       arguments required for calling COM interface method
     * @param <T>        type of the result object that is to be returned by the method
     * @return result of the COM API method invocation in defined format
     */
    private <T extends Out> T invoke(COM_API_Method method, Function<Variant[], T> returnFunc, Variant... vars) {
        dll.invoke(method.name(), vars);
        T res = returnFunc.apply(vars);
        asList(vars).forEach(Variant::safeRelease);
        return res;
    }

    @SuperBuilder
    private static abstract class Out {
        final Integer outcome;
        final String error;
    }

    @SuperBuilder
    private static class InitialiseWithIDOut extends Out {
        final String loginId;
        final String sessionId;
}

Two other methods, Logon and getMatchedUsers, are implemented accordingly. You can refer to my GitHub repo for a complete version of the service if you want to check it out.

Congratulations – You've Learned a Few Things

We've gone through a step by step scenario that showed us how a hypothetical COM API could be distributed and called in Java.

We also learned how the JACOB library can be configured and effectively used to interact with a DDL library within your Spring Boot 2 application.

A small improvement would be to cache the retrieved SessionID which could improve the general flow. But that's a bit outside the scope of this article.

If you want to investigate further, you can find that on GitHub where it's implemented using Spring's caching mechanism.

Hope you enjoyed going through everything with me and found this tutorial helpful!

So how can we use Storybook to build libraries and design systems that self-document as we build them?

• What is Storybook?
• What are we going to build?
• Step 0: Bootstrapping an app
• Step 1: Installing Storybook
• Step 2: Creating a new button
• Step 3: Using our new Button component
• Repeat: Creating a new Header component
• More Storybook features

What is Storybook?

Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use.

Lonely Planet's Backpack UI

Once you build out a component, Storybook lets you create a "story" file where you can then import your component and create various use case examples in an iFramed sandbox using that component.

This provides an organized and focused environment to build new components and work on existing ones.

What are we going to build?

We're going to bootstrap a new React JS app using Create React App.

Inside that app, we're going to install Storybook and create a few new components that will help us learn how to create new components that we can work on in a story and then use it in a React app.

Step 0: Bootstrapping an app

To get started, we're going to start from scratch with Create React App. This will help us focus on getting productive in Storybook rather than walking through integrating it into a current app.

That said, if you're already working with an app created using Create React App that's not ejected, you should be able to still follow on with Part 1 and beyond just the same!

So let's get started by navigating to where we want to create our new app and run the Create React App command:

npx create-react-app my-storybook

Note: feel free to replace my-storybook with the directory name of your choice.

Bootstrapping with Create React App

Once that's finished running, you can navigate to the directory:

cd my-storybook

And we're ready to go!

Step 1: Installing Storybook

Storybook luckily makes it really easy to get started with a standard installation of React. Particularly with Create React App, Storybook automatically detects that we're using an app created using CRA and installs the dependencies and scaffolds everything for us.

Initializing Storybook

To get started installing Storybook, run:

npx -p @storybook/cli sb init

Initializing Storybook in a React app

If you aren't using Create React App or it didn't work, you can check out their available guides in their docs.

After that's finished, all of our Storybook dependencies should be installed.

Finished installing Storybook

Starting up Storybook

So now we're ready to get moving! Finally, run:

yarn storybook
# or
npm run storybook

And once everything finishes loading, Storybook will open a new tab in your browser and you should now see a welcome message inside of your new Storybook dashboard!

Storybook welcome page

Follow along with the commit!

Step 2: Creating a new button

If you took a second to poke around the dashboard, you might have noticed that it comes pre-loaded with a Button that's available as a demo.

Storybook demo button

You should also notice if you click the button, you actually see an action print out inside of the Actions tab at the bottom. This shows the event that's captured from the button click.

It's simple, but this is great to get a nice feel about what to expect in storybook. The only issue is, this is meant purely for demonstration purposes, so let's build our own button to replace it.

Creating a new Button component

To get started, let's first create a few directories:

• Under src, create a new folder called components
• Under components, create a new folder called Button

Once you create those folders, create a new file called index.js inside of your src/components/Button folder and inside add:

// Inside src/components/Button/index.js

export { default } from './Button';

This will import the next file we created called Button.js which will allow us to more easily import our files with src/components/Button instead of /src/components/Button/Button.

Next, let's create Button.js right next to our index.js file with the following content:

// Inside src/components/Button/Button.js

import React from 'react';

const Button = ({ children, ...rest }) => {
  return (
    <button className="button" {...rest}>
      { children }
    </button>
  )
}

export default Button;

Here, we're creating a new component called Button that adds a class of button to the element and passes through the children. We're a additionally destructuring the rest of the props into the rest variable and spreading that value into the <button> element.

If you've followed along, your files should now look like this:

Button component in React

Using our new Button component

So now that we have our Button component, let's use it!

Open up the file src/stories/1-Button.stories.js and replace the line that's importing Button with:

Updating the Button Storybook story

And once you hit save, you can open back up your browser tab with your Storybook dashboard, and you can now see a button that looks mostly similar, but it uses the browser's default styles for the <button> element. You'll even notice that if you click it, the event will still be logged under the Actions tab.

Styling our Button component

Finally, we probably don't want to use the browser default styles, so let's make it look nice.

In our src/components/Button directory, add a new file Button.css and add the following content:

/* Inside src/components/Button/Button.css */

.button {
  color: white;
  font-weight: bold;
  background-color: blueviolet;
  border: none;
  padding: .8em 1em;
  border-radius: .2rem;
}

This applies a few styles to our .button class like adding a background color and changing the font color to white.

But if you open Storybook, you'll notice it didn't do anything. To use it, we need to import it into our component.

Inside src/components/Button/Button.js add the following at the top under the React import:

import './Button.css';

And once you save that and open up your browser, you should now see our new button with our updated styles!

New Button in Storybook

Follow along with the commit!

Step 3: Using our new Button component

The ultimate goal of our component is to use it right? So let's add it to our app.

Switching over to the React app

First we'll need to either start our React app in a new terminal tab or kill the Storybook process and start the React process there. To start the React app using Create React App, run:

yarn start
# or
npm run start

Once that loads, we should have our standard Create React App if you're following along with me:

New Create React App

Importing and using the new button

Next, inside of src/App.js, let's import our new Button at the top of the page:

import Button from './components/Button';

With Button imported, we can use it. Here, we can simply add it anywhere we want in the page. I'm going to replace the Learn React link with:

<p>
  <Button>Hello, Storybook!</Button>
</p>

And if we save and reload the page, we should now see our Button on the page!

New Button in Create React App

Follow along with the commit

Repeat: Creating a new Header component

The great thing about Storybook and React (or any of the supported frameworks) is that this process scales to as many components as you want.

So let's build another component!

Creating our Header component

Similar to our Button, let's start off by creating the set of directories and files that give us our component.

Since we already did this once, I'm going to provide the code without walking through what's going on.

Let's start off by spinning back up our Storybook server with:

yarn storybook
# or 
npm run storybook

Create a Header directory inside the src/components directory.

Create an index.js file inside of src/components/Header with the following content:

// In src/components/Header/index.js

export { default } from './Header';

Create a Header.js file inside of src/components/Header with the following content:

// In src/components/Header/Header.js

import React from 'react';
import './Header.css';

const Header = ({ children }) => {
  return (
    <h2 className="header">
      { children }
    </h2>
  )
}

export default Header;

Create a Header.css file inside of src/components/Header with the following content:

/* In src/components/Header/Header.css */

.header {
  font-family: sans-serif;
  font-size: 2.5em;
  color: blueviolet;
  border-bottom: solid 5px aqua;
  padding-bottom: .2em;
  box-shadow: 0 5px 0 blueviolet;
}

Now if you notice, if you try to open up Storybook, again, nothing will happen. This time we need to create a new story file.

Creating a new Story file

Inside src/stories, add a new file called 2-Header.stories.js:

// Inside src/stories/2-Header.stories.js

import React from 'react';

import Header from '../components/Header';

export default {
  title: 'Header',
  component: Header,
};

export const Text = () => <Header>Hello Header</Header>;

Here's a breakdown of our story file:

• First, we import our component – this is pretty standard any time we want to use it
• The first thing we export is a default object. With Storybook, it expects the default export to be the configuration of our story, so here we provide it with a title and we pass in the component that we're using for this story
• The second and last thing we export is the Text constant. With Storybook, any non-default export will be considered a variation that will get nested under the title that you provide in the default export

And if you save this file and open up your Storybook dashboard in the browser, you should now see the new header!

New Header component in Storybook

Using the Header component

Using our component is just the same as our Button component, so inside of src/App.js, let's add our Header.

After starting your React server, first import our new Header:

// In src/App.js

import Header from './components/Header';

Then add it to the top of the page:

// In src/App.js

<Header>My App</Header>

And if you open the page, we'll see our new Header!

Create React App with new Header and Button components

Follow along with the commit!

Adding more components

As you've noticed with our second Repeat step – adding a new component is pretty much the same process for any type of component we want to add. Once we have it in our library, we can develop it in a focused environment and then import it to our app to use.

You can now use this to manage your library of components and better maintain an entire system for your project!

More Storybook features

Storybook doesn't stop with just adding components, it provides the ability to configure Addons that enhance the core capabilities opening up a lot of possibilities.

Here are some of my favorites...

Story Source

When building a component system, the hope is that people can easily use these components. But if you don't have documentation, someone would have to open up the file or try to find another use example.

Instead, Story Source shows the code source of the story file you created allowing someone browsing your Storybook dashboard to get an example right along with the component output!

Storybook Story Source demo

Storyshots

If you're a fan of automated testing, you might have heard of using Jest or another tool for adding snapshot testing to your app.

StoryShots is a way to easily add Jest snapshot testing to your component system. It creates snapshots based off of the stories you create so you can make sure that your components aren't fundamentally changing (or breaking) during development.

Snapshot example with StoryShots

What's your favorite part of Storybook?

Share with me on Twitter!

Continue the conversation!

Here's a rundown of two that will help you build your next app.

Touchables

Some of the main features of mobile devices revolve around user touch interactions. How a mobile app handles and responds to these interactions can make or break the user’s experience.

React Native ships with a Button component which works for many standard onPress interactions. By default, it will give the user feedback by changing the opacity to show the button was pressed. Usage:

<Button onPress={handlePress} title="Submit" />

For more complex use cases, React Native has APIs build in to handle press interactions called Touchables.

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback

Each of these Touchable components can be styled and used with a library, like the built-in Animated, allowing you to make your own types of custom user feedback.

Some examples of using these components:

// with images
<TouchableHighlight onPress={this.handlePress}>
  <Image
    style={styles.button}
    source={require('./logo.png')}
  />
</TouchableHighlight>

// with text
<TouchableHighlight onPress={this.handlePress}>
  <Text>Hello</Text>
</TouchableHighlight>

You can handle different types of button presses as well. By default, buttons and touchables are configured to handle regular taps, but you can also denote a function to call for press and hold interactions for example.

<TouchableHighlight onPress={this.handlePress} onLongPress={this.handleLongPress}>

To see all of the available props and how these components work, you can look at the JavaScript source code for Touchables here.

Screen Dimensions

React Native uses Dots Per Inch (DPI) to measure the sizing of the User Interface (UI) and anything displayed on the UI. This type of measurement allows an application to look uniform across various screen sizes and pixel densities.

For standard use cases, applications can be developed without having to know the specifics of the user’s device (for example, pixel density) since the UI elements will scale automatically.

When it is required, there are APIs available such as PixelRatio to help you find out the pixel density of the user's device.

To get the window or screen height/width of a user's device, React Native has an API called Dimensions.

import { Dimensions } from 'react-native';

Here are the methods that the Dimensions API provides:

Dimensions.get('window').height;
Dimensions.get('window').width;
Dimensions.get('screen').height;
Dimensions.get('screen').width;

Note: There have been some known issues in the past with the Dimensions API such as not returning the correct information when a user rotates their device. It’s best to make sure you test this on actual devices before deploying an application.

More info on responsive design:

• Free responsive design course
• Best Bootstrap tutorials for responsive web design
• How to think responsively
• Guide to responsive images
• Learn responsive design in 5 minutes