brightlightkim

How to put images on top of box using TailwindCSS and Reat?

brightlightkim — Sun, 18 Jun 2023 06:20:00 +0900

<section className="mb-6">
        <h2 className="text-center text-5xl font-semibold mb-20">
          EyeCanKnow's algorithms
        </h2>
        <div className="flex px-10 relative">
          <img
            src={camera_image_url}
            className="flex-none absolute top-10 left-4 rounded-2xl mb-12 w-1/2 h-96 object-cover"
            alt="camera"
          />
          <div className="w-full h-96 mb-20"></div>
          <div className="w-full h-96 mb-20"></div>
          <div className="lg:pl-32 xl:pl-20 flex items-center bg-gray-200 rounded-xl text-2xl text-gray-700">
            <p className="pr-8">
              EyeCanKnow utilizes the <b>camera</b> on a test taker's mobile
              device to{" "}
              <u className="underline-offset-4 decoration-red-400">
                measure their deception
              </u>{" "}
              about past experiences via changes in involuntary eye behavior,
              pupil diameter, eye movement, blinks, fixations, and other things.
            </p>
          </div>
        </div>
      </section>

Use Relative on Parent Instance and put Absolute class instead of fixed. Fixed is only use for navigations or bottoms.

Window Selection Object

brightlightkim — Wed, 19 Apr 2023 04:42:59 +0900

Selection

A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection().

A user may make a selection from left to right (in document order) or right to left (reverse of document order). The anchor is where the user began the selection and the focus is where the user ends the selection. If you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button.

Note: Anchor and focus should not be confused with the start and end positions of a selection. The anchor can be placed before the focus or vice versa, depending on the direction you made your selection.

Instance properties

Selection.anchorNode Read only

Returns the Node in which the selection begins. Can return null if selection never existed in the document (e.g., an iframe that was never clicked on).

Selection.anchorOffset Read only

Returns a number representing the offset of the selection's anchor within the anchorNode. If anchorNode is a text node, this is the number of characters within anchorNode preceding the anchor. If anchorNode is an element, this is the number of child nodes of the anchorNode preceding the anchor.

Selection.focusNode Read only

Returns the Node in which the selection ends. Can return null if selection never existed in the document (for example, in an iframe that was never clicked on).

Selection.focusOffset Read only

Returns a number representing the offset of the selection's anchor within the focusNode. If focusNode is a text node, this is the number of characters within focusNode preceding the focus. If focusNode is an element, this is the number of child nodes of the focusNode preceding the focus.

Selection.isCollapsed Read only

Returns a Boolean indicating whether the selection's start and end points are at the same position.

Selection.rangeCount Read only

Returns the number of ranges in the selection.

Selection.type Read only

Returns a string describing the type of the current selection.

Instance methods

Selection.addRange()

A Range object that will be added to the selection.

Selection.collapse()

Collapses the current selection to a single point.

Selection.collapseToEnd()

Collapses the selection to the end of the last range in the selection.

Selection.collapseToStart()

Collapses the selection to the start of the first range in the selection.

Selection.containsNode()

Indicates if a certain node is part of the selection.

Selection.deleteFromDocument()

Deletes the selection's content from the document.

Selection.extend()

Moves the focus of the selection to a specified point.

Selection.getRangeAt()

Returns a Range object representing one of the ranges currently selected.

Selection.modify()

Changes the current selection.

Selection.removeRange()

Removes a range from the selection.

Selection.removeAllRanges()

Removes all ranges from the selection.

Selection.selectAllChildren()

Adds all the children of the specified node to the selection.

Selection.setBaseAndExtent()

Sets the selection to be a range including all or parts of two specified DOM nodes, and any content located between them.

Selection.toString()

Returns a string currently being represented by the selection object, i.e. the currently selected text.

Notes

String representation of a selection

Calling the Selection.toString() method returns the text contained within the selection, e.g.:

const selObj = window.getSelection();
window.alert(selObj);

Copy to Clipboard

Note that using a selection object as the argument to window.alert will call the object's toString method.

Multiple ranges in a selection

A selection object represents the Ranges that the user has selected. Typically, it holds only one range, accessed as follows:

const selObj = window.getSelection();
const range = selObj.getRangeAt(0);

Copy to Clipboard

selObj is a Selection object
range is a Range object

As the Selection API specification notes, the Selection API was initially created by Netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <table>). However, browsers other than Gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.

Selection and input focus

Selection and input focus (indicated by Document.activeElement) have a complex relationship that varies by browser. In cross-browser compatible code, it's better to handle them separately.

Safari and Chrome (unlike Firefox) currently focus the element containing selection when modifying the selection programmatically; it's possible that this may change in the future (see W3C bug 14383 and Webkit bug 38696).

Behavior of Selection API in terms of editing host focus changes

The Selection API has a common behavior (i.e., shared between browsers) that governs how focus behavior changes for editing hosts after certain methods are called.

The behavior is as follows:

An editing host gains focus if the previous selection was outside of it.
A Selection API method is called, causing a new selection to be made with the selection range inside the editing host.
Focus then moves to the editing host.

Note: The Selection API methods may only move focus to an editing host, not to other focusable elements (e.g., <a>).

The above behavior applies to selections made using the following methods:

And when the Range is modified using the following methods:

Glossary

Other key terms used in this section.

anchor

The anchor of a selection is the beginning point of the selection. When making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. As the user changes the selection using the mouse or the keyboard, the anchor does not move.

editing host

An editable element (e.g., an HTML element with contenteditable set, or the HTML child of a document that has designMode enabled).

focus of a selection

The focus of a selection is the end point of the selection. When making a selection with a mouse, the focus is where in the document the mouse button is released. As the user changes the selection using the mouse or the keyboard, the focus is the end of the selection that moves.

Note: This is not the same as the focused element of the document, as returned by document.activeElement.

range

A range is a contiguous part of a document. A range can contain entire nodes as well as portions of nodes (such as a portion of a text node). A user will normally only select a single range at a time, but it's possible for a user to select multiple ranges (e.g., by using the Control key). A range can be retrieved from a selection as a range object. Range objects can also be created via the DOM and programmatically added or removed from a selection.

from https://developer.mozilla.org/en-US/docs/Web/API/Selection

NextJS Navbar with TailwindCSS

brightlightkim — Fri, 27 Jan 2023 16:54:05 +0900

Create responsive navbar in next js using useState hook and tailwind.

import Head from 'next/head';
import Link from 'next/link';
import { useState } from 'react';


export default function Home() {
  const [navbar, setNavbar] = useState(false);
  return (
    <div>
      <Head>
        <title>Create Next Responsive Navbar With Tailwind CSS</title>
        <meta
          name="description"
          content="Create Next JS Responsive Menu with Tailwind CSS"
        />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <nav className="w-full bg-gray-800 shadow">
        <div className="justify-between px-4 mx-auto lg:max-w-7xl md:items-center md:flex md:px-8">
          <div>
            <div className="flex items-center justify-between py-3 md:py-5 md:block">
              <a href="#">
                <h2 className="text-2xl text-white font-bold">NEXT JS</h2>
              </a>
              <div className="md:hidden">
                <button
                  className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
                  onClick={() => setNavbar(!navbar)}
                >
                  {navbar ? (
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-6 h-6 text-white"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                        clipRule="evenodd"
                      />
                    </svg>
                  ) : (
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      className="w-6 h-6 text-white"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                      strokeWidth={2}
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        d="M4 6h16M4 12h16M4 18h16"
                      />
                    </svg>
                  )}
                </button>
              </div>
            </div>
          </div>
          <div>
            <div
              className={`flex-1 justify-self-center pb-3 mt-8 md:block md:pb-0 md:mt-0 ${
                navbar ? 'block' : 'hidden'
              }`}
            >
              <ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
                <li className="text-white">
                  <Link href="/">
                    <a>Home</a>
                  </Link>
                </li>
                <li className="text-white">
                  <Link href="/blogs">
                    <a>Blogs</a>
                  </Link>
                </li>
                <li className="text-white">
                  <Link href="/about">
                    <a>About US</a>
                  </Link>
                </li>
                <li className="text-white">
                  <Link href="/contact">
                    <a>Contact US</a>
                  </Link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
      <div className="flex justify-center items-center mt-8">
        <h1 className="text-2xl font-bold text-purple-500">
          Create Responsive Navbar Menu in Next js with Tailwind CSS
        </h1>
      </div>
    </div>
  );
}

An introduction to Convolutional Neural Networks

brightlightkim — Tue, 24 Jan 2023 14:45:24 +0900

Describing what Convolutional Neural Networks are, how they function, how they can be used and why they are so powerful

A Convolutional neural network (CNN) is a neural network that has one or more convolutional layers and are used mainly for image processing, classification, segmentation and also for other auto correlated data.

A convolution is essentially sliding a filter over the input. One helpful way to think about convolutions is this quote from Dr Prasad Samarakoon: “A convolution can be thought as “looking at a function’s surroundings to make better/accurate predictions of its outcome.”

Rather than looking at an entire image at once to find certain features it can be more effective to look at smaller portions of the image.

Common uses for CNNs

The most common use for CNNs is image classification, for example identifying satellite images that contain roads or classifying hand written letters and digits. There are other quite mainstream tasks such as image segmentation and signal processing, for which CNNs perform well at.

CNNs have been used for understanding in Natural Language Processing (NLP) and speech recognition, although often for NLP Recurrent Neural Nets (RNNs) are used.

A CNN can also be implemented as a U-Net architecture, which are essentially two almost mirrored CNNs resulting in a CNN whose architecture can be presented in a U shape. U-nets are used where the output needs to be of similar size to the input such as segmentation and image improvement.

Interesting uses for CNNs other than image processing

More and more diverse and interesting uses are being found for CNN architectures. An example of a non-image based application is “The Unreasonable Effectiveness of Convolutional Neural Networks in Population Genetic Inference” by Lex Flagel et al. This is used to perform selective sweeps, finding gene flow, inferring population size changes, inferring rate of recombination.

There are researchers such as Professor Gerald Quon at the Quon-titative biology lab, using CNNs for generative models in single cell genomics for disease identification.

CNNs are also being used in astrophysics to interpret radio telescope data to predict the likely visual image to represent the data.

Deepmind’s WaveNet is a CNN model for generating synthesized voice, used as the basis for Google’s Assistant’s voice synthesizer.

Convolutional kernels

Each convolutional layer contains a series of filters known as convolutional kernels. The filter is a matrix of integers that are used on a subset of the input pixel values, the same size as the kernel. Each pixel is multiplied by the corresponding value in the kernel, then the result is summed up for a single value for simplicity representing a grid cell, like a pixel, in the output channel/feature map.

These are linear transformations, each convolution is a type of affine function.

In computer vision the input is often a 3 channel RGB image. For simplicity, if we take a greyscale image that has one channel (a two dimensional matrix) and a 3x3 convolutional kernel (a two dimensional matrix). The kernel strides over the input matrix of numbers moving horizontally column by column, sliding/scanning over the first rows in the matrix containing the images pixel values. Then the kernel strides down vertically to subsequent rows. Note, the filter may stride over one or several pixels at a time, this is detailed further below.

In other non-vision applications, a one dimensional convolution may slide vertically over an input matrix.

Creating a feature map from a convolutional kernel

Below is a diagram showing the operation of the convolutional kernel.

A stride one 3x3 convolutional kernel acting on a 8x8 input image, outputting an 8x8 filter/channel. Source: https://www.researchgate.net/figure/a-Illustration-of-the-operation-principle-of-the-convolution-kernel-convolutional-layer_fig2_309487032

Below is a visualisation from an excellent presentation, showing the kernel scanning over the values in the input matrix.

Kernel scanning over the values in the input matrix. Source: Otavio Good: excerpt https://www.youtube.com/watch?v=f0t-OCG79-U from https://www.youtube.com/watch?v=Oqm9vsf_hvU

Padding

To handle the edge pixels there are several approaches:

Losing the edge pixels
Padding with zero value pixels
Reflection padding

Reflection padding is by far the best approach, where the number of pixels needed for the convolutional kernel to process the edge pixels are added onto the outside copying the pixels from the edge of the image. For a 3x3 kernel, one pixel needs to be added around the outside, for a 7x7 kernel then three pixels would be reflected around the outside. The pixels added around each side is the dimension, halved and rounded down.

Traditionally in many research papers, the edge pixels are just ignored, which loses a small proportion of the data and this gets increasing worse if there are many deep convolutional layers. For this reason, I could not find existing diagrams to easily convey some of the points here without being misleading and confusing stride 1 convolutions with stride 2 convolutions.

With padding, the output from a input of width w and height h would be width w and height h (the same as the input with a single input channel), assuming the kernel takes a stride of one pixel at a time.

Creating multiple channels/feature maps with multiple kernels

When multiple convolutional kernels are applied within a convolutional layer, many channels/feature maps are created, one from each convolutional kernel. Below is a visualisation below showing the channels/feature maps being created.

Visualisation of channels/feature maps created from a layer of convolutional kernels. Source: Otavio Good: excerpt https://www.youtube.com/watch?v=f0t-OCG79-U from https://www.youtube.com/watch?v=Oqm9vsf_hvU

RGB 3 channel input

Most image processing needs to operate on RGB images with three channels. A RGB image is a three dimensional array of numbers otherwise known as a rank three tensor.

When processing a three channel RGB image, a convolutional kernel that is a three dimensional array/rank 3 tensor of numbers would normally be used. It is very common for the convolutional kernel to be of size 3x3x3 — the convolutional kernel being like a cube.

Usually there is at least three convolutional kernels in order that each can act as a different filter to gain insight from each colour channel.

The convolution kernels as a group make a four dimensional array, otherwise known as a rank four tensor. It is difficult, if not impossible, to visualise dimensions when they are higher than three. In this case imagine it as a list of three dimensional cubes.

The filter moves across the input data in the same way, sliding or taking strides across the rows then moving down the columns and striding across the rows until it reaches the bottom right corner:

3x3x3 convolutional kernel acting on a 3 channel input. Source: https://machinethink.net/images/vggnet-convolutional-neural-network-iphone/ConvolutionKernel@2x.png

With padding and a stride of one, the output from an input of width x, height y and depth 3 would be width x, height y and depth 1, as the cube produces a single summed output value from each stride. For example, with an input of 3x64x64 (say a 64x64 RGB three channel image) then one kernel taking strides of one with padding the edge pixels would output a channel/feature map of 64x64 (one channel).

It is worth noting the input is often normalised, this is detailed further below.

Strides

It is common to use a stride two convolution rather than a stride one convolution, where the convolutional kernel strides over 2 pixels at a time, for example our 3x3 kernel would start at position (1,1), then stride to (1,3), then to 1, 5) and so on, halving the size of the output channel/feature map, compared to the convolutional kernel taking strides of one.

With padding, the output from an input of width w, height h and depth 3 would be the ceiling of width w/2, height h/2 and depth 1, as the kernel outputs a single summed output from each stride.

For example, with an input of 3x64x64 (say a 64x64 RGB three channel image), one kernel taking strides of two with padding the edge pixels, would produce a channel/feature map of 32x32.

Many kernels

In CNN models there are often there are many more than three convolutional kernels, 16 kernels or even 64 kernels in a convolutional layer is common.

These different convolution kernels each act as a different filter creating a channel/feature map representing something different. For example, kernels could be filtering top edges, bottom edges, diagonal lines and so on. In much deeper networks these kernels could be filtering to animal features such as eyes or bird wings.

Having a higher number of convolutional kernels creates a higher number of channels/feature maps and a growing amount of data and this uses more memory. The stride 2 convolution, as per the above example, helps to reduce the memory usage as the output channel of the stride 2 convolution has half the width and height of the input. This assumes reflection padding is being used otherwise it could be slightly smaller.

An example of several convolutional layers of stride 2

With a 64 pixel square input with three channels and 16 3x3x3 kernels our convolutional layer would have:

Input: 64x64x3
Convolutional kernels: 16x3x3x3 (a four dimensional tensor)
Output/activations of the convolutional kernels: 16x32x32 (16 channels/feature maps of 32x32)

The network could then apply batch normalisation to decrease learning time and reduce overfitting, more details below. In addition a non-linear activation function, such as RELU is usually applied to allow the network to approximate better, more details below.

Often there are several layers of stride 2 convolutions, creating an increasing number of channels/feature maps. Taking the example above a layer deeper:

Input: 16x32x32
Convolutional kernels: 64x3x3x3
Output/activations of the convolutional kernels: 64x16x16 (64 channels/feature maps of 16x16)

Then after applying ReLU and batch normalisation (see below), another stride 2 convolution is applied:

Input: 64x16x16
Convolutional kernels: 128x3x3x3
Output/activations of the convolutional kernels: 128x8x8 (128 channels/feature maps of 8x8).

Classification

If, for example, an image belongs to one of 42 categories and the network’s goal is to predict which category the image belongs to.

Following on from the above example with an output of 128x8x8, first the average pool of the rank 3 tensor is taken. The average pool is the mean average of each channel, in the this example each 8x8 matrix is averaged into a single number, with 128 channels/feature maps. This creates 128 numbers, a vector of size 1x128.

The next layer is a matrix or rank 2 tensor of 128x42 weights. The input 1x128 matrix is (dot product) multiplied by the 128x42 matrix producing a 1x42 vector. How activated each of the 42 grid cells/vector elements are, is how much the prediction matches that classification represented by that vector element. Softmax is applied as an activation function and then argmax to select the element highest value.

Rectified Linear Unit (ReLU)

A Rectified Linear Unit is used as a non-linear activation function. A ReLU says if the value is less than zero, round it up to zero.

Normalisation

Normalisation is the process of subtracting the mean and dividing by the standard deviation. It transforms the range of the data to be between -1 and 1 making the data use the same scale, sometimes called Min-Max scaling.

It is common to normalize the input features, standardising the data by removing the mean and scaling to unit variance. It is often important the input features are centred around zero and have variance in the same order.

With some data, such as images the data is scaled so that it’s range is between 0 and 1, most simply dividing the pixel values by 255.

This also allows the training process to find the optimal parameters quicker.

Batch normalisation

Batch normalisation has the benefits of helping to make a network output more stable predictions, reduce overfitting through regularisation and speeds up training by an order of magnitude.

Batch normalisation is the process of carrying normalisation within the scope activation layer of the current batch, subtracting the mean of the batch’s activations and dividing by the standard deviation of the batches activations.

This is necessary as even after normalizing the input as some activations can be higher, which can cause the subsequent layers to act abnormally and makes the network less stable.

As batch normalisation has scaled and shifted the activation outputs, the weights in the next layer will no longer be optimal. Stochastic gradient descent (SGD) would undo the normalisation, as it would minimise the loss function.

To prevent this effect two trainable parameters can be added to each layer to allow SGD to denormalise the output. These parameters are a mean parameter “beta” and a standard deviation parameter “gamma”. Batch normalisation sets these two weights for each activation output to allow the normalisation to be reversed to get the raw input, this avoids affecting the stability of the network by avoiding having to update the other weights.

Why CNNs are so powerful

In simple terms a large enough CNN can solve any solvable problem.

Notable CNN architecture’s that perform exceptionally well across many different image processing tasks are the VGG models ( K. Simonyan and A. Zisserman), the ResNet models (Kaiming He et al) and the Google Inception models (Christian Szegedy et al). These models have millions of trainable parameters.

VGG-16 Network Architecture. Source: https://neurohive.io/wp-content/uploads/2018/11/vgg16-1-e1542731207177.png

Universal approximation theorem

The Universal approximation theorem essentially states if a problem can be solved it can be solved by deep neural networks, given enough layers of affine functions layered with non-linear functions. Essentially a stack of linear functions followed by non-linear functions could solve any problem that is solvable.

Practically in implementation this can be many matrix multiplication with large enough matrices followed by RELU, stacked together these have a mathematical property resulting in being able to solve any arbitrary complex mathematical function to any arbitrary high level of accuracy assuming you have the time and resource to train it.

Whether this would give the neural network understanding is a debated topic, especially by cognitive scientists. The argument is that no matter how well you approximate the syntax and semantics of a problem, you never understand it. This is basically the foundation of Searle’s Chinese Room Argument. Some would argue that does it matter if you can approximate the solution to the problem well enough that it’s indistinguishable from understanding the problem.

Fastai courses

I would like to thank the Fastai team whose courses have helped cement my deep learning and CNN knowledge providing an excellent starting point for further learning and understanding.

from https://towardsdatascience.com/an-introduction-to-convolutional-neural-networks-eb0b60b58fd7

Tailwind CSS Intro

brightlightkim — Tue, 6 Dec 2022 16:01:11 +0900

Tailwind CSS is a utility-first CSS (Cascading Style Sheets) framework with predefined classes that you can use to build and design web pages directly in your markup. It lets you write CSS in your HTML in the form of predefined classes.

We’ll define what a framework is and what we mean by “utility-first CSS” to help you better understand what Tailwind CSS is all about.

What Is a Framework?

As a general programming term, a framework is a tool that provides reusable and ready-made components built from the features of an already existing tool. The overall purpose of creating frameworks is to increase development speed by doing less work.

Now that we’ve established the meaning of a framework, it should help you understand that Tailwind CSS is a tool built upon CSS features. All the framework’s functionalities were derived from CSS styles composed as classes.

What Is a Utility-First CSS Framework?

When we say utility-first CSS, we refer to classes in our markup (HTML) with predefined functionalities. This implies that you only have to write a class with predefined styles attached to it, and those styles will be applied to the element.

In a case where you are working with vanilla CSS (CSS without any framework or library), you would first give your element a class name and then attach different properties and values to that class, which will, in turn, apply styling to your element.

We’ll show you an example. Here, we’ll create a button with rounded corners and a text that says “Click me.” This is what the button will look like:

Our button.

We’ll first do this using vanilla CSS, and then using utility classes available in Tailwind CSS.

With Vanilla CSS

<button class="btn">Click me</button>

We’ve given button tags the class btn, which will be styled using an external stylesheet. That is:

.btn {
  background-color: #000;
  color: #fff;
  padding: 8px;
  border: none;
  border-radius: 4px;
}

With Tailwind CSS

<button class="bg-black p-2 rounded">Click me</button>

This is all required to achieve the same effect as the example with vanilla CSS. No external stylesheet where you have to write the styles was created because each class name we used already has a predefined style.

Prerequisites for Using Tailwind CSS

Before using Tailwind CSS, there are some prerequisites that you should consider meeting to use the framework’s features without difficulties. Here are a few of them:

Good knowledge of HTML, its structure, and how it works
Solid foundation in CSS — media queries, flexbox, and grid system

Where Can Tailwind CSS Be Used?

You can use Tailwind CSS in frontend web projects, including JavaScript frameworks like React.js, Next.js, Laravel, Vite, Gatsby, etc.

Pros and Cons of Tailwind CSS

Here are some of the advantages of using Tailwind CSS:

Faster development process
Helps you practice your CSS more as the utilities are similar
All utilities and components are easily customizable
The overall file size for production is usually small
Easy to learn if you already know CSS
Good documentation for learning

Some of the disadvantages of using Tailwind CSS include:

Your markup might look disorganized for large projects because all the styles are in the HTML files.
It isn’t easy to learn if you don’t understand CSS well.
You are forced to build everything from scratch, including your input elements. When you install Tailwind CSS, it removes all default CSS styles.
Tailwind CSS is not the best option if you are looking to minimize time spent developing your website’s frontend and mainly focusing on the backend logic.

When to Use Tailwind CSS

Tailwind CSS is best used to speed up the development process by writing less code. It comes with a design system that helps maintain consistency across various design requirements like padding, spacing, and so forth; with this, you do not have to worry about creating your design systems.

You can also use Tailwind CSS if you are looking to use a framework that is easily configurable because it does not force you to use components (navigation bars, buttons, forms, and so forth) in the same way all the time; you get to choose what your components should look like. But you should never use Tailwind if you have not learned and practiced CSS.

Similarities and Differences Between Tailwind CSS and Other CSS Frameworks

Here are a few similarities:

They help you get work done faster.
They come with predefined classes.
They were built upon CSS rules.
They’re both easy to learn and use with a working knowledge of CSS.

Now let’s look at some of the differences:

Tailwind is different from most frameworks because you have to create your components. For example, Bootstrap has components like navigation bars, buttons, and so forth, but with Tailwind, you have to build all that yourself.
Some frameworks like Bootstrap are not easily customizable, so you are forced to use their design patterns. In Tailwind, you control the flow of everything.
In-depth knowledge of CSS is required to use Tailwind. Writing class names is not enough, since you must combine them as though you were writing vanilla CSS to achieve the same result. All you need to know in most other frameworks is what component will be built out when you use a class name.

How to Get Started With Using Tailwind CSS

Before installing Tailwind CSS and integrating it in your project, make sure that:

You have Node.js installed on your computer to make use of the Node package manager (npm) in the terminal.
Your project is all set up with your files created.

This is what our project structure looks like at the moment:

-Tailwind-tutorial
    -public
        -index.html
        -styles.css
    -src
        -styles.css

Next, start up a terminal for your project and run the following commands:

    npm install -D tailwindcss

The above command will install the Tailwind CSS framework as a dependency. Next, generate your tailwind.config.js file by running the command below:

    npm install -D tailwindcss

The tailwind.config.js file will be empty when created, so we’ve to add some lines of code:

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [],
};

The file paths provided in the content array will enable Tailwind to purge/remove any unused styles during build time.

Want to know how we increased our traffic over 1000%?

Join 20,000+ others who get our weekly newsletter with insider WordPress tips!

Subscribe Now

The next thing to do is to add the “@tailwind” directives to your CSS file in the src folder — this is where Tailwind generates all of its predefined utility styles for you:

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

The last thing to do is to start the build process by running this command in your terminal:

    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

In the code above, we’re telling Tailwind that our input file is the stylesheet in the src folder and that whatever styles we’ve used have to be built into the output file in the public folder. --watch allows Tailwind to watch your file for changes for an automatic build process; omitting it means we’ve to run that script every time we want to build our code and see the desired output.

Want to do more while writing less code? A solid frontend framework is one way to accomplish that. Start with Tailwind CSS ‍ CLICK TO TWEET

Using Tailwind CSS

Now that we’ve installed and set up Tailwind CSS for our project, let’s see some examples to understand its application fully.

Flexbox Example

To use flex in Tailwind CSS, you need to add a class of flex and then the direction of the flex items:

    <div class="flex flex-row">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>

Our three purple buttons.

Using flex-row-reverse will reverse the order in which the buttons appear.

flex-col stacks them above each other. Here is an example:

    <div class="flex flex-col">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
    </div>

Our three purple buttons.

Just like the previous example, flex-col-reverse reverses the order.

Grid Example

When specifying columns and rows in the grid system, we take a different approach by passing in a number that will determine how the elements will occupy available space:

<div class="grid grid-cols-3">
      <button> Button 1 </button>
      <button> Button 2 </button>
      <button> Button 3 </button>
      <button> Button 4 </button>
      <button> Button 5 </button>
      <button> Button 6 </button>
    </div>

Our six purple buttons.

Colors

Tailwind comes with a lot of predefined colors. Each color has a set of different variations, with the lightest variation being 50 and the darkest being 900.

Here is a picture of multiple colors and their HTML hex codes to illustrate this

Customizing colors from Tailwind’s default palette. (Image source)

We’ll give an example of how you can do this using the red color above to give a button element a background color:

<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>

This syntax is the same for all colors in Tailwind except for black and white, which are written the same way but without the use of numbers: bg-black and bg-white.

To add text color, you use the class text-{color}:

<p class="text-yellow-600">Hello World</p>

Padding

Tailwind already has a design system that would help you keep a consistent scale across your designs. All you have to know is the syntax for applying each utility.

The following are utilities for adding padding to your elements:

p denotes padding across the whole element.
py denotes padding padding-top and padding-bottom.
px denotes padding-left and padding-right.
pt denotes padding-top.
pr denotes padding-right.
pb denotes padding-bottom.
pl denotes padding-left

To apply them to your elements, you’d have to use the appropriate numbers provided by Tailwind — a bit similar to the numbers that represented color variants in the last section. Here’s what we mean:

<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>

Margin

The predefined utilities for padding and margin are very similar. You have to replace the p with an m:

How to Create a Tailwind CSS Plugin

Even though Tailwind CSS has loads of utilities and design systems already built for you, it’s still possible that you may have a particular functionality that you would like to add to extend what Tailwind can be used for. Tailwind CSS allows us to do this by creating a plugin.

Let’s get our hands dirty by creating a plugin that adds the aqua color and a rotate utility that rotates an element 150º on the X-axis. We’ll make these utilities in the tailwind.config.js file using a little bit of JavaScript.

const plugin = require("tailwindcss/plugin");

module.exports = {
  content: ["./src/**/*.{html,js}", "./public/*.html"],
  theme: {
    extend: {},
  },
  plugins: [
    plugin(function ({ addUtilities }) {
      const myUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(myUtilities);
    }),
  ],

};

Now, let’s break this down. The first thing we did was to import Tailwind’s plugin function:

const plugin = require("tailwindcss/plugin");

Then we went on to create our plugins in the plugins array:

  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        ".bg-aqua": { background: "aqua" },
        ".rotate-150deg": {
          transform: "rotateX(150deg)",
        },
      };
      addUtilities(newUtilities);
    }),
  ],

You might have to rerun the build script after making your plugin.

Now that the plugins have are ready, we can test them:

<button class="bg-aqua rotate-150deg">Click me</button>

If you did everything right, you should have a button with an aqua color with the text rotated to 150º on the X-axis.

Your secret weapon for building and designing web pages? Tailwind CSS CLICK TO TWEET

Summary

Frameworks are an invaluable option when it comes to speeding up your workflow. They help you build good-looking and professional web pages while maintaining consistency in design. Tailwind CSS provides many utility-forward CSS classes to help take your web design and development to the next level.

This article taught us what Tailwind CSS is and what makes it a framework. We then looked at the installation process and saw a few examples that showed how we could create our custom plugins to extend the existing functionality.

If you’ve followed up to this point, then you now have a basic but solid understanding of how Tailwind works. To get better at using such a utility-first framework, though, you must keep practicing and increase your knowledge of CSS if you don’t have a solid foundation already.

Rust enums and pattern matching

brightlightkim — Mon, 5 Dec 2022 14:37:01 +0900

Pattern matching and enums can be used for a number of things, like error handling, handling null values, and more. In this article, we will go over the basics of pattern matching, enums, and see how enums can be used with pattern matching, including:

But, to follow along with this article, you must have at least a basic understanding of the Rust programming language.

Pattern matching in Rust

Pattern matching is a mechanism of programming languages that allows the flow of the program to branch into one of multiple branches on a given input.

Let’s say we have a variable called name that’s a string representing the name of a person. With each name, we display a fruit as shown below:

John => papaya
Annie => blueberry
Michael => guava
Gabrielle => apple
Others => orange

Here, we created five branches; the name to the left side of => represents a name pattern, and the fruit on the right side is the branch that will display. So if name is John, we display a papaya, if name is Annie, we display blueberry, and so on.

But, if the value of name is not a registered pattern, it defaults to Others.

In Rust, we perform pattern matching using the match statement, which we can use with our previous example in the following code:

match name {
  "John" => println!("papaya"),
  "Annie" => println!("blueberry"),
  "Michael" => println!("guava"),
  "Gabrielle" => println!("apple"),
  _ => println!("orange"),
}

The match statement in Rust works like the switch statement in other programming languages like C++, Java, JavaScript, or others. But, the match statement has some advantages over the switch statement.

For one, it checks if the variable name on the first line above matches any of the values at the left side of => and then executes what is on the right of the pattern that matches.

If all the patterns do not match the name variable, it defaults to _ (which matches every value) and displays orange in the terminal. This is just like the Others pattern we saw earlier.

Creating pattern matching like this is very powerful, but if we want to execute more than a line of code, we replace the right side of the => in the match block with a block of code that has all the lines you want to execute.

In the following example, we modify the previous match statement to print a number and a color along with the fruit for each name:

match name {
  "John" => {
    println!("4");
    println!("green");
    println!("papaya");
  },
  "Annie" => {
    println!("3");
    println!("blue");
    println!("blueberry");
  },
  "Michael" => {
    println!("2");
    println!("yellow");
    println!("guava");
  },
  "Gabrielle" => {
    println!("1");
    println!("purple");
    println!("apple");
  },
  _ => {
    println!("0");
    println!("orange");
    println!("orange");
  },
}

Here, we converted the simple line:

_ => println!("orange"),

Into a statement that executes multiple lines of code on match:

_ => {
    println!("0");
    println!("orange");
    println!("orange");
  },

With this, we can execute more than one line. And, if we want to return a value, we can either use the return statement or Rust’s return shortcut. The shortcut is done by removing the semicolon of the last expression:

_ => {
    println!("0");
    println!("orange");
    println!("orange");
    "This is for the others"
  },

Or by using the following:

_ => {
    println!("0");
    println!("orange");
    println!("orange");
    return "This is for the others";
  },

A single line pattern also returns the value of the expression to the right of => so you can do the following:

let result = match name {
  "John" => "papaya",
  "Annie" => "blueberry",
  "Michael" => "guava",
  "Gabrielle" => "apple",
  _ => "orange",
};

println!("{}", result);

This does the same thing as the first match statement example.

Using enums in Rust

Enums are Rust data structures that represent a data type with more than one variant. Enums can perform the same operations that a struct can but use less memory and fewer lines of code.

Over 200k developers use LogRocket to create better digital experiences

Learn more →

We can use any of an enum’s variants for our operations, but, we can only use the base enum for specifying that we will either return a variant from a function or assign it to a variable.

That means the base enum itself cannot be assigned to a variable. For an example of an enum, let’s create a vehicle enum with three variants: Car, MotorCycle, and Bicycle.

enum Vehicle {
  Car,
  MotorCycle,
  Bicycle,
}

We can then access the variants by writing Vehicle::<variant>:

let vehicle = Vehicle::Car;

And, if you want to statically type it, you can write something like this:

let vehicle: Vehicle = Vehicle::Car;

Pattern matching With Enums

Just as we can perform pattern matching with strings, numbers, and other data types, we can also match enum variants too:

match vehicle {
    Vehicle::Car => println!("I have four tires"),
    Vehicle::MotorCycle => println!("I have two tires and run on gas"),
    Vehicle::Bicycle => println!("I have two tires and run on your effort")
  }

Here, we:

Passed the variable into a match statement
Created patterns to match the individual variants
Coded what will execute once the variable matches any pattern

So, we can write a program like this:

enum Vehicle {
  Car,
  MotorCycle,
  Bicycle,
}

fn main() {
  let vehicle = Vehicle::Car;

  match vehicle {
    Vehicle::Car => println!("I have four tires"),
    Vehicle::MotorCycle => println!("I have two tires and run on gas"),
    Vehicle::Bicycle => println!("I have two tires and run on your effort")
  }
}

This results in the following:

> rustc example.rs
> ./example

I have four tires

Adding data to enum variants

We can also add data to our enum variants. We must specify that our variant can hold data by adding a parenthesis with the data types of what it will hold:

enum Vehicle {
  Car(String),
  MotorCycle(String),
  Bicycle(String),
}

Then, we can use it like this:

fn main() {
  let vehicle = Vehicle::Car("red".to_string());

  match vehicle {
    Vehicle::Car(color) => println!("I am {} and have four tires", color),
    Vehicle::MotorCycle(color) => println!("I am {} and have two tires and run on gas", color),
    Vehicle::Bicycle(color) => println!("I am {} and have two tires and run on your effort", color)
  }
}

Here, we:

Created a new instance of the enum and assigned it to a variable
Put that variable in a match statement
Destructured the contents of each enum variant into a variable within the match statement
Used the destructed variable in the codeblock by the right of the pattern.

Result and Option enums

The Result and Option enums are part of the standard libraries used in Rust for handling results, errors, and null values of a function or a variable.

Result enum

This is a very common enum in Rust that handles errors from a function or variable. It has two variants: Ok and Err.

The Ok variant holds the data returned if there are no errors, and the Err variant holds the error message. For example, we can create a function that returns a variant of the enum:

fn divide(numerator: i32, denominator: i32) -> Result<i32, String> {
    if denominator == 0 {
        return Err("Cannot divide by zero".to_string());
    } else {
        return Ok(numerator / denominator);
    }
}

This function takes two arguments. The first one is the numerator and the second is the denominator. It returns the Result::Err variant if the denominator is zero and Result::Ok with the result if the denominator isn’t zero.

And then, we can use the function with pattern matching:

fn main() {
    match divide(103, 2) {
        Ok(solution) => println!("The answer is {}", solution),
        Err(error) => println!("Error: {}", error)
    }
}

In this example;

We attempt to divide 103 by 2
Create the Ok pattern match and extract the data it contains.
Underneath that, create an Err pattern that gets any error message

The Result enum also allows us to handle the errors without using the match statement. That means we can use any or all of the following:

Unwrap gets the data in the Ok variant
Unwrap_err obtains the error message from the result‘s Err variant
is_err returns true if the value is an Err variant

Is_ok determines if the value is an Ok variant

let number = divide(103, 2);
if number.is_err() {
  println!("Error: {}", number.unwrap_err());
} else if number.is_ok() {
  println!("The answer is {}", number.unwrap());
}

All Result enum values in Rust must be used or else we receive a warning from the compiler telling us that we have an unused Result enum.

Option enum

The Option enum is used in Rust to represent an optional value. It has two variants: Some and None.

Some is used when the input contains a value and None represents the lack of a value. It is usually used with a pattern matching statement to handle the lack of a usable value from a function or expression.

So here, we can modify the divide function to use the Options enum instead of the Result:

fn divide(numerator: i32, denominator: i32) -> Option<i32> {
    if denominator == 0 {
        return None;
    } else {
        return Some(numerator / denominator);
    }
}

In this new divide function, we changed the return type from Result to Option, so it returns None if the denominator is zero and Some with the result if the denominator is not zero.

Then, we can use the new divide function in the following way:

fn main() {
    match divide(103, 0) {
        Some(solution) => println!("The answer is {}", solution),
        None => println!("Your numerator was about to be divided by zero :)")
    }
}

In this main function, we changed the Ok variant from Result to Some from Options, and change Err to None.

Conclusion

In this article, we saw how enums and pattern matching works and how the match statement is more advanced than the switch statements.

And finally, we saw how we can use enums to improve pattern matching through holding data.

I hope this article has helped you fully understand how pattern matching and enums work. If there’s anything you do not understand, be sure to let me know in the comments.

Thanks for reading and have a nice day!

from https://blog.logrocket.com/rust-enums-and-pattern-matching/

Rust enums and pattern matching - LogRocket Blog

Learn the basics of pattern matching and enums in Rust, including error handling, handling null values, and more.

blog.logrocket.com

Next.js doesn't call the local Rust API

brightlightkim — Sat, 26 Nov 2022 04:43:52 +0900

If the public api call is something containing "localhost," it's better to use "0.0.0.0" instead.

NEXT_PUBLIC_API_URL = 'http://localhost:8080'

If it's like this and doesn't work, try:

NEXT_PUBLIC_API_URL = 'http://0.0.0.0:8080'

React .env not working

brightlightkim — Mon, 14 Nov 2022 05:34:20 +0900

Many developers use create-react-app to generate a boilerplate needed to quickly start developing a React application.

It gives you the option to define Environment Variables is a special file named .env.

All variables defined in this file are accessible in the code via process.env.<VARIABLE_NAME>.

Define Environment Variable

First, open the project and create .env file in the root directory:

To define Environment Variable, open the .env file and paste the following code:

MY_ENVIRONMENT_VARIABLE=test

We have just defined our first variable, great.

Next, save the changes, close the file and navigate to App.jsx and read the variable:

const App = () => {
  console.log(process.env.MY_ENVIRONMENT_VARIABLE);
  return <div className="App">Hello, world</div>;
};

Start the project:

yarn start

And note that undefined was output to the console:

Do you know why?

Gotcha #1

The first mistake we made is not reloading our app after defining an Environment Variable.

Remember that Environment Variables are embedded during build time.

Any change in the .env file requires an application to be reloaded.

Let's do this and try again:

Still no success, let's find out why.

Gotcha #2

The second thing to remember is that, for security reasons, create-react-app does not allow you to define Environment Variables that do not start with the REACT_APP_ prefix.

Our variable name is definitely wrong and will not work.

Let's change it:

REACT_APP_MY_ENVIRONMENT_VARIABLE=test

And in the App.jsx:

const App = () => {
  console.log(process.env.REACT_APP_MY_ENVIRONMENT_VARIABLE);
  return <div className="App">Hello, world</div>;
};

export default App;

Reload an application and check the console:

Hooray, we got it to work.

Summary

The two most important things to remember when defining Environment Variables in a project bootstrapped with create-react-app are:

Always reload your application after making a change to the .env file
Always prefix your variables with REACT_APP_

Android Threading: All You Need to Know

brightlightkim — Sat, 12 Nov 2022 03:05:49 +0900

Every Android developer, at one point or another, needs to deal with threads in their application.

When an application is launched in Android, it creates the first thread of execution, known as the “main” thread. The main thread is responsible for dispatching events to the appropriate user interface widgets as well as communicating with components from the Android UI toolkit.

To keep your application responsive, it is essential to avoid using the main thread to perform any operation that may end up keeping it blocked.

Network operations and database calls, as well as loading of certain components, are common examples of operations that one should avoid in the main thread. When they are called in the main thread, they are called synchronously, which means that the UI will remain completely unresponsive until the operation completes. For this reason, they are usually performed in separate threads, which thereby avoids blocking the UI while they are being performed (i.e., they are performed asynchronously from the UI).

Android provides many ways of creating and managing threads, and many third-party libraries exist that make thread management a lot more pleasant. However, with so many different approaches at hand, choosing the right one can be quite confusing.

In this article, you will learn about some common scenarios in Android development where threading becomes essential and some simple solutions that can be applied to those scenarios and more.

Threading in Android

In Android, you can categorize all threading components into two basic categories:

Threads that are attached to an activity/fragment: These threads are tied to the lifecycle of the activity/fragment and are terminated as soon as the activity/fragment is destroyed.
Threads that are not attached to any activity/fragment: These threads can continue to run beyond the lifetime of the activity/fragment (if any) from which they were spawned.

Threading Components that Attach to an Activity/Fragment

ASYNCTASK

AsyncTask is the most basic Android component for threading. It’s simple to use and can be good for basic scenarios.

Sample usage:

public class ExampleActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        new MyTask().execute(url);
    }

    private class MyTask extends AsyncTask<String, Void, String> {

        @Override
        protected String doInBackground(String... params) {
            String url = params[0];
            return doSomeWork(url);
        }

        @Override
        protected void onPostExecute(String result) {
            super.onPostExecute(result);
            // do something with result 
        }
    }
}

AsyncTask, however, falls short if you need your deferred task to run beyond the lifetime of the activity/fragment. It is worth noting that even something as simple as screen rotation can cause the activity to be destroyed.

LOADERS

Loaders are the solution for the problem mentioned above. Loaders can automatically stop when the activity is destroyed, and can also restart themselves after the activity is recreated.

There are mainly two types of loaders: AsyncTaskLoader and CursorLoader. You will learn more about CursorLoader later in this article.

AsyncTaskLoader is similar to AsyncTask, but a bit more complicated.

Sample usage:

public class ExampleActivity extends Activity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getLoaderManager().initLoader(1, null, new MyLoaderCallbacks());
    }
    
    private class MyLoaderCallbacks implements LoaderManager.LoaderCallbacks {

        @Override
        public Loader onCreateLoader(int id, Bundle args) {
            return new MyLoader(ExampleActivity.this);
        }

        @Override
        public void onLoadFinished(Loader loader, Object data) {

        }

        @Override
        public void onLoaderReset(Loader loader) {

        }
    }

    private class MyLoader extends AsyncTaskLoader {

        public MyLoader(Context context) {
            super(context);
        }

        @Override
        public Object loadInBackground() {
            return someWorkToDo();
        }
        
    }
}

Threading Components that Don’t Attach to an Activity/Fragment

SERVICE

Service is a component that is useful for performing long (or potentially long) operations without any UI.

Service runs in the main thread of its hosting process; the service does not create its own thread and does not run in a separate process unless you specify otherwise.

Sample usage:

public class ExampleService extends Service {

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        doSomeLongProccesingWork();
        stopSelf();

        return START_NOT_STICKY;
    }

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return null;
    }
}

With Service, it is your responsibility to stop it when its work is complete by calling either the stopSelf() or the stopService() method.

INTENTSERVICE

Like Service, IntentService runs on a separate thread, and stops itself automatically after it completes its work.

IntentService is usually used for short tasks that don’t need to be attached to any UI.

Sample usage:

public class ExampleService extends IntentService {
    
    public ExampleService() {
        super("ExampleService");
    }

    @Override
    protected void onHandleIntent(Intent intent) {
        doSomeShortWork();
    }
}

Seven Threading Patterns in Android

Use Case No. 1: Making a request over network without requiring a response from the server

Sometimes you may want to send an API request to a server without needing to worry about its response. For example, you may be sending a push registration token to your application’s back-end.

Since this involves making a request over the network, you should do it from a thread other than the main thread.

OPTION 1: ASYNCTASK OR LOADERS

You can use AsyncTask or loaders for making the call, and it will work.

However, AsyncTask and loaders are both dependent on the lifecycle of the activity. This means you will either need to wait for the call to execute and try to prevent the user from leaving the activity, or hope that it will execute before the activity is destroyed.

OPTION 2: SERVICE

Service may be a better fit for this use case since it isn’t attached to any activity. It will therefore be able to continue with the network call even after the activity is destroyed. Plus, since the response from the server is not needed, a service wouldn’t be limiting here, either.

However, since a service will begin running on the UI thread, you will still need to manage threading yourself. You will also need to make sure that the service is stopped once the network call is complete.

This would require more effort than should be necessary for such a simple action.

OPTION 3: INTENTSERVICE

This, in my opinion, would be the best option.

Since IntentService doesn’t attach to any activity and it runs on a non-UI thread, it serves our needs perfectly here. Moreover, IntentService stops itself automatically, so there is no need to manually manage it, either.

Use Case No. 2: Making a network call, and getting the response from the server

This use case is probably a bit more common. For example, you may want to invoke an API in the back-end and use its response to populate fields on the screen.

OPTION 1: SERVICE OR INTENTSERVICE

Although a Service or an IntentService fared well for the previous use case, using them here wouldn’t be a good idea. Trying to get data out of a Service or an IntentService into the main UI thread would make things very complex.

OPTION 2: ASYNCTASK OR LOADERS

At first blush, AsyncTask or loaders would appear to be the obvious solution here. They are easy to use—simple and straightforward.

However, when using AsyncTask or loaders, you’ll notice that there is a need to write some boilerplate code. Moreover, error handling becomes a major chore with these components. Even with a simple networking call, you need to be aware of potential exceptions, catch them, and act accordingly. This forces us to wrap our response in a custom class containing the data, with possible error information, and a flag indicates if the action was successful or not.

That’s quite a lot of work to do for every single call. Fortunately, there is now a much better and simpler solution available: RxJava.

OPTION 3: RXJAVA

You may heard about RxJava, the library developed by Netflix. It’s almost magic in Java.

RxAndroid lets you use RxJava in Android, and makes dealing with asynchronous tasks a breeze. You can learn more about RxJava on Android here.

RxJava provides two components: Observer and Subscriber.

An observer is a component that contains some action. It performs that action and returns the result if it succeeds or an error if it fails.

A subscriber, on the other hand, is a component that can receive the result (or error) from an observable, by subscribing to it.

With RxJava, you first create an observable:

Observable.create((ObservableOnSubscribe<Data>) e -> {
    Data data = mRestApi.getData();
    e.onNext(data);
})

Once the observable has been created, you can subscribe to it.

With the RxAndroid library, you can control the thread in which you want to execute the action in the observable, and the thread in which you want to get the response (i.e., the result or error).

You chain on the observable with these two functions:

.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread()

Schedulers are components that execute the action in a certain thread. AndroidSchedulers.mainThread() is the scheduler associated with the main thread.

Given that our API call is mRestApi.getData() and it returns a Data object, the basic call can look like this:

Observable.create((ObservableOnSubscribe<Data>) e -> {
            try { 
                        Data data = mRestApi.getData();
                        e.onNext(data);
            } catch (Exception ex) {
                        e.onError(ex);
            }
})
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
.subscribe(match -> Log.i(“rest api, "success"),
            throwable -> Log.e(“rest api, "error: %s" + throwable.getMessage()));

Without even going into other benefits of using RxJava, you can already see how RxJava allows us to write more mature code by abstracting away the complexity of threading.

Use Case No. 3: Chaining network calls

For network calls that need to be performed in sequence (i.e., where each operation depends upon the response/result of the previous operation), you need to be particularly careful about generating spaghetti code.

For example, you may have to make an API call with a token that you need to fetch first through another API call.

OPTION 1: ASYNCTASK OR LOADERS

Using AsyncTask or loaders will almost definitely lead to spaghetti code. The overall functionality will be difficult to get right and will require a tremendous amount of redundant boilerplate code throughout your project.

OPTION 2: RXJAVA USING FLATMAP

In RxJava, the flatMap operator takes an emitted value from the source observable and returns another observable. You can create an observable, and then create another observable using the emitted value from the first one, which will basically chain them.

Step 1. Create the observable that fetches the token:

public Observable<String> getTokenObservable() {
    return Observable.create(subscriber -> {
        try {
            String token = mRestApi.getToken();
            subscriber.onNext(token);

        } catch (IOException e) {
            subscriber.onError(e);
        }
    });
}

Step 2. Create the observable that gets the data using the token:

public Observable<String> getDataObservable(String token) {
    return Observable.create(subscriber -> {
        try {
            Data data = mRestApi.getData(token);
            subscriber.onNext(data);

        } catch (IOException e) {
            subscriber.onError(e);
        }
    });
}

Step 3. Chain the two observables together and subscribe:

getTokenObservable()
.flatMap(new Function<String, Observable<Data>>() {
    @Override
    public Observable<Data> apply(String token) throws Exception {
        return getDataObservable(token);
    }
})
.subscribe(data -> {
    doSomethingWithData(data)
}, error -> handleError(e));

Note that use of this approach is not limited to network calls; it can work with any set of actions that needs to be run in a sequence but on separate threads.

All of the use cases above are quite simple. Switching between threads only happened after each finished its task. More advanced scenarios—for example, where two or more threads need to actively communicate with each other—can be supported by this approach as well.

Use Case No. 4: Communicate with the UI thread from another thread

Consider a scenario where you would like to upload a file and update the user interface once it is complete.

Since uploading a file can take a long time, there is no need to keep the user waiting. You could use a service, and probably IntentService, for implementing the functionality here.

In this case, however, the bigger challenge is being able to invoke a method on the UI thread after the file upload (which was performed in a separate thread) is complete.

OPTION 1: RXJAVA INSIDE THE SERVICE

RxJava, either on its own or inside an IntentService, may not be ideal. You will need to use a callback-based mechanism when subscribing to an Observable, and IntentService is built to do simple synchronous calls, not callbacks.

On the other hand, with a Service, you will need to manually stop the service, which requires more work.

OPTION 2: BROADCASTRECEIVER

Android provides this component, which can listen to global events (e.g., battery events, network events, etc.) as well as custom events. You can use this component to create a custom event that is triggered when the upload is complete.

To do this, you need to create a custom class that extends BroadcastReceiver, register it in the manifest, and use Intent and IntentFilter to create the custom event. To trigger the event, you will need the sendBroadcast method.

Manifest:

<receiver android:name="UploadReceiver">
   
    <intent-filter>
        <action android:name="com.example.upload">
        </action>
    </intent-filter>
   
</receiver>

Receiver:

public class UploadReceiver extends BroadcastReceiver {

    @Override
    public void onReceive(Context context, Intent intent) {
        if (intent.getBoolean(“success”, false) {
            Activity activity = (Activity)context;
            activity.updateUI();
    }

}

Sender:

Intent intent = new Intent();
intent.setAction("com.example.upload"); 
sendBroadcast(intent);

This approach is a viable option. But as you have noticed, it involves some work, and too many broadcasts can slow things down.

OPTION 3: USING HANDLER

A Handler is a component that can be attached to a thread and then made to perform some action on that thread via simple messages or Runnable tasks. It works in conjunction with another component, Looper, which is in charge of message processing in a particular thread.

When a Handler is created, it can get a Looper object in the constructor, which indicates which thread the handler is attached to. If you want to use a handler attached to the main thread, you need to use the looper associated with the main thread by calling Looper.getMainLooper().

In this case, to update the UI from a background thread, you can create a handler attached to the UI thread, and then post an action as a Runnable:

Handler handler = new Handler(Looper.getMainLooper());
    handler.post(new Runnable() {
        @Override
        public void run() {
            // update the ui from here                
        }
    });

This approach is a lot better than the first one, but there is an even simpler way to do this…

OPTION 3: USING EVENTBUS

EventBus, a popular library by GreenRobot, enables components to safely communicate with one another. Since our use case is one where we only want to update the UI, this can be the simplest and safest choice.

Step 1. Create an event class. e.g., UIEvent.

Step 2. Subscribe to the event.

@Subscribe(threadMode = ThreadMode.MAIN)  
public void onUIEvent(UIEvent event) {/* Do something */};

 register and unregister eventbus : 

@Override
public void onStart() {
    super.onStart();
    EventBus.getDefault().register(this);
}

@Override
public void onStop() {
    super.onStop();
    EventBus.getDefault().unregister(this);
}

Step 3. Post the event: EventBus.getDefault().post(new UIEvent());

With the ThreadMode parameter in the annotation, you are specifying the thread on which you would like to subscribe for this event. In our example here, we are choosing the main thread, since we will want the receiver of the event to be able to update the UI.

You can structure your UIEvent class to contain additional information as necessary.

In the service:

class UploadFileService extends IntentService {
    // …
    Boolean success = uploadFile(File file);
    EventBus.getDefault().post(new UIEvent(success));
    // ...
}

In the activity/fragment:

@Subscribe(threadMode = ThreadMode.MAIN)  
public void onUIEvent(UIEvent event) {//show message according to the action success};

Using the EventBus library, communicating between threads becomes much simpler.

Use Case No. 5: Two-way communication between threads based on user actions

Suppose you are building a media player and you want it to be able to continue playing music even when the application screen is closed. In this scenario, you will want the UI to be able to communicate with the media thread (e.g., play, pause, and other actions) and will also want the media thread to update the UI based on certain events (e.g. error, buffering status, etc).

A full media player example is beyond the scope of this article. You can, however, find good tutorials here and here.

OPTION 1: USING EVENTBUS

You could use EventBus here. However, it is generally unsafe to post an event from the UI thread and receive it in a service. This is because you have no way of knowing whether the service is running when you have sent the message.

OPTION 2: USING BOUNDSERVICE

A BoundService is a Service that is bound to an activity/fragment. This means that the activity/fragment always knows if the service is running or not and, in addition, it gets access to the service’s public methods.

To implement it, you need to create a custom Binder inside the service and create a method that returns the service.

public class MediaService extends Service {

    private final IBinder mBinder = new MediaBinder();

    public class MediaBinder extends Binder {
        MediaService getService() {
            // Return this instance of LocalService so clients can call public methods
            return MediaService.this;
        }
    }

    @Override
    public IBinder onBind(Intent intent) {
        return mBinder;
    }

}

To bind the activity to the service, you need to implement ServiceConnection, which is the class monitoring the service status, and use the method bindService to make the binding:

// in the activity
MediaService mService;
// flag indicates the bound status
boolean mBound;

@Override
    protected void onStart() {
        super.onStart();
        // Bind to LocalService
        Intent intent = new Intent(this, MediaService.class);
        bindService(intent, mConnection, Context.BIND_AUTO_CREATE);
    }

    private ServiceConnection mConnection = new ServiceConnection() {

        @Override
        public void onServiceConnected(ComponentName className,
                IBinder service) {

            MediaBinder binder = (MediaBinder) service;
            mService = binder.getService();
            mBound = true;
        }

        @Override
        public void onServiceDisconnected(ComponentName arg0) {
            mBound = false;
        }
    };

You can find a full implementation example here.

To communicate with the service when the user taps on the Play or Pause button, you can bind to the service and then call the relevant public method on the service.

When there is a media event and you want to communicate that back to the activity/fragment, you can use one of the earlier techniques (e.g., BroadcastReceiver, Handler, or EventBus).

Use Case No. 6: Executing actions in parallel and getting results

Let’s say you are building a tourist app and you want to show attractions on a map fetched from multiple sources (different data providers). Since not all of the sources may be reliable, you may want to ignore the ones that have failed and continue to render the map anyway.

To parallelize the process, each API call must take place in a different thread.

OPTION 1: USING RXJAVA

In RxJava, you can combine multiple observables into one using the merge() or concat() operators. You can then subscribe on the “merged” observable and wait for all results.

This approach, however, won’t work as expected. If one API call fails, the merged observable will report an overall failure.

OPTION 2: USING NATIVE JAVA COMPONENTS

The ExecutorService in Java creates a fixed (configurable) number of threads and executes tasks on them concurrently. The service returns a Future object that eventually returns all results via the invokeAll() method.

Each task you send to the ExecutorService should be contained in Callable interface, which is an interface for creating a task that can throw an exception.

Once you get the results from invokeAll(), you can check every result and proceed accordingly.

Let’s say, for example, that you have three attraction types coming in from three different endpoints and you want to make three parallel calls:

ExecutorService pool = Executors.newFixedThreadPool(3);
    List<Callable<Object>> tasks = new ArrayList<>();
    tasks.add(new Callable<Object>() {
        @Override
        public Integer call() throws Exception {
            return mRest.getAttractionType1();
        }
    });

    // ...

    try {
        List<Future<Object>> results = pool.invokeAll(tasks);
        for (Future result : results) {
        try {
            Object response = result.get();
            if (response instance of AttractionType1... {}
            if (response instance of AttractionType2... {}
                ...
            } catch (ExecutionException e) {
                e.printStackTrace();
            }
        }
    } catch (InterruptedException e) {
        e.printStackTrace();
    }

This way, you are running all of the actions in parallel. You can, therefore, check for errors in each action separately and ignore individual failures as appropriate.

This approach is easier than using RxJava. It is simpler, shorter, and doesn’t fail all actions because of one exception.

Use Case #7: Querying local SQLite database

When dealing with a local SQLite database, it is recommended that the database be used from a background thread, since database calls (especially with large databases or complex queries) can be time consuming, resulting in the UI freezing.

When querying for SQLite data, you get a Cursor object that can then be used to fetch the actual data.

Cursor cursor = getData();
String name = cursor.getString(<colum_number>);

OPTION 1: USING RXJAVA

You can use RxJava and get the data from the database, just as we’re getting data from our back-end:

public Observable<Cursor> getLocalDataObservable() {
    return Observable.create(subscriber -> {
        Cursor cursor = mDbHandler.getData();
        subscriber.onNext(cursor);
    });
}

You can use the observable returned by getLocalDataObservable() as follows:

getLocalDataObservable()
.subscribeOn(Schedulers.io())
.observeOn(AndroidSchedulers.mainThread())
 .subscribe(cursor -> String name = cursor.getString(0),
                   throwable -> Log.e(“db, "error: %s" + throwable.getMessage()));

While this is certainly a good approach, there is one that is even better, since there is a component that is built just for this very scenario.

OPTION 2: USING CURSORLOADER + CONTENTPROVIDER

Android provides CursorLoader, a native component for loading SQLite data and managing the corresponding thread. It’s a Loader that returns a Cursor, which we can use to get the data by calling simple methods such as getString(), getLong(), etc.

public class SimpleCursorLoader extends FragmentActivity implements
LoaderManager.LoaderCallbacks<Cursor> {

  public static final String TAG = SimpleCursorLoader.class.getSimpleName();
  private static final int LOADER_ID = 0x01;
  private TextView textView;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.simple_cursor_loader);
    textView = (TextView) findViewById(R.id.text_view);
    getSupportLoaderManager().initLoader(LOADER_ID, null, this);

  }

  public Loader<Cursor> onCreateLoader(int i, Bundle bundle) {

    return new CursorLoader(this,
      Uri.parse("content://com.github.browep.cursorloader.data")
      , new String[]{"col1"}, null, null, null);
    }

    public void onLoadFinished(Loader<Cursor> cursorLoader, Cursor cursor) {
      if (cursor != null && cursor.moveToFirst()) {
        String text =  textView.getText().toString();
        while (cursor.moveToNext()) {
          text += "<br />" + cursor.getString(1);
          cursor.moveToNext();
        }
        textView.setText(Html.fromHtml(text) );
      }
    }

    public void onLoaderReset(Loader<Cursor> cursorLoader) {
      
    }

}

CursorLoader works with the ContentProvider component. This component provides a plethora of real-time database features (e.g., change notifications, triggers, etc.) that enables developers to implement a better user experience much more easily.

There’s no Silver Bullet Solution to Threading in Android

Android provides many ways to handle and manage threads, but none of them are silver bullets.

Choosing the right threading approach, depending on your use case, can make all the difference in making the overall solution easy to implement and understand. The native components fit well for some cases, but not for all. The same applies for fancy third-party solutions.

I hope you will find this article useful when working on your next Android project. Share with us your experience of threading in Android or any use case where the above solutions work well—or don’t, for that matter—in the comments below.

from https://www.toptal.com/android/android-threading-all-you-need-to-know#:~:text=When%20an%20application%20is%20launched,from%20the%20Android%20UI%20toolkit.

Android Threading: All You Need to Know

Android provides many ways of creating and managing threads, and third-party libraries exist to make that even easier. However, with so many options, choosing the right approach can be quite confusing. In this article, Toptal Freelance Software Engineer El

www.toptal.com

[RxJava] Managing State with RxJava

brightlightkim — Fri, 11 Nov 2022 04:30:33 +0900

What if there are more async calls, there are a number of cases we should care about.

When there are a number of cases.. in the Mobile Development

Everything in Android is async.

The activity life cycle is reactive. RxJava solves this problem.

RxJava can remove the intermediator code. It can connect directly to its components

Observable: Any time the user update the value with the user, we can do something with it

Completable: It can receive failure or not.

disposables >> lifecycle to disconnect from the componenets

Use the disposable list > disconnect it.

Whenever data is pushed in, you never have to pull it out.

State Problem

clicks: turning them into string everytime they clicks it

Then after that disable click one.

flatMap: take items emissions and move them into observable that folded get back into the stream

if it's succeed

If it's an error and check it.

However, it takes a lot of trouble.

brightlightkim

How to put images on top of box using TailwindCSS and Reat?

Window Selection Object

Selection

NextJS Navbar with TailwindCSS

An introduction to Convolutional Neural Networks

Describing what Convolutional Neural Networks are, how they function, how they can be used and why they are so powerful

Common uses for CNNs

Interesting uses for CNNs other than image processing

Convolutional kernels

Creating a feature map from a convolutional kernel

Padding

Creating multiple channels/feature maps with multiple kernels

RGB 3 channel input

Strides

Many kernels

An example of several convolutional layers of stride 2

Classification

Rectified Linear Unit (ReLU)

Normalisation

Batch normalisation

Why CNNs are so powerful

Universal approximation theorem

Fastai courses

Tailwind CSS Intro

What Is a Framework?

What Is a Utility-First CSS Framework?

With Vanilla CSS

With Tailwind CSS

Prerequisites for Using Tailwind CSS

Where Can Tailwind CSS Be Used?

Pros and Cons of Tailwind CSS

When to Use Tailwind CSS

Similarities and Differences Between Tailwind CSS and Other CSS Frameworks

How to Get Started With Using Tailwind CSS

Want to know how we increased our traffic over 1000%?

Using Tailwind CSS

Flexbox Example

Grid Example

Colors

Padding

Margin

How to Create a Tailwind CSS Plugin

Summary

Rust enums and pattern matching

Pattern matching in Rust

Using enums in Rust

Over 200k developers use LogRocket to create better digital experiences

Pattern matching With Enums

Adding data to enum variants

Result and Option enums

Result enum

Option enum

More great articles from LogRocket:

Conclusion

Next.js doesn't call the local Rust API

React .env not working

Define Environment Variable

Gotcha #1

Gotcha #2

Summary

Android Threading: All You Need to Know

Threading in Android

Threading Components that Attach to an Activity/Fragment

ASYNCTASK

LOADERS

Threading Components that Don’t Attach to an Activity/Fragment

SERVICE

INTENTSERVICE

Seven Threading Patterns in Android

Use Case No. 1: Making a request over network without requiring a response from the server

OPTION 1: ASYNCTASK OR LOADERS

OPTION 2: SERVICE

OPTION 3: INTENTSERVICE

Use Case No. 2: Making a network call, and getting the response from the server

OPTION 1: SERVICE OR INTENTSERVICE

OPTION 2: ASYNCTASK OR LOADERS

OPTION 3: RXJAVA

Use Case No. 3: Chaining network calls

OPTION 1: ASYNCTASK OR LOADERS