DEV Community: Adeeko Tobiloba Isreal

A comprehensive guide to understanding array methods in Javascript

Adeeko Tobiloba Isreal — Mon, 28 Aug 2023 16:53:09 +0000

Introduction
Arrays are fundamental data structures in JavaScript that allow you to store and manipulate collections of elements. They provide a versatile way to manage data, and JavaScript provides a plethora of built-in methods specifically designed to make working with arrays efficient and convenient. These array methods empower developers to perform a wide range of operations, such as adding, removing, and modifying elements, as well as searching, sorting, and transforming arrays.

In this comprehensive guide, we will delve into the world of array methods in JavaScript. Whether you're a beginner seeking to understand the basics or an experienced programmer aiming to level up your skills, this guide will cover the essentials and nuances of array methods.

Table of Content:

Introduction to array method
- Understanding the importance of Array method
- How Array Methods Simplifies your code structure
Basic Array methods
- Using forEach methods
- How to map array data
- How to use the filter method
Implementing iterative array methods
Understanding searching and sorting
Manipulating Arrays with these array methods
- Understanding the difference and usage of push and pop method
- Why and when should you use the shift and unshift method
- The importance of using spice method
The essence of reduction and accumulation in Javascript
- Understanding the reduce method
- Why should you use the reduceRight method?
Combining arrays in javascript
How to combine arrays with the concat method
Chaining array methods in javascript
- Understanding chaining method
- Benefits of chaining method
Conclusion

Prerequisites

Basic familiarity with JavaScript syntax and concepts.
Understanding of arrays and their role in programming.
Knowledge of functions and their usage in JavaScript.

This guide will provide a comprehensive understanding of array methods in JavaScript, suitable for both beginners and those with some programming experience. It covers essential concepts and progressively explores more advanced topics, enabling you to effectively utilize array methods to manipulate, transform, and optimize your arrays in JavaScript.

1. Introduction to array method

Arrays are an integral part of JavaScript, allowing you to store collections of data in a single structure. However, working with arrays often involves performing various operations on their elements, such as iteration, transformation, filtering, and more. This is where array methods come into play. Array methods are built-in functions that provide a convenient and efficient way to work with arrays, simplifying complex tasks and making your code more readable and maintainable.

I. Understanding the Importance of Array Methods

Array methods bring several key advantages to your JavaScript coding endeavors:

Readability and Clarity: Array methods are designed to perform specific tasks, making your code more self-explanatory. Instead of writing manual loops and complex logic, you can use array methods that have clear and descriptive names.

Efficiency: Array methods are optimized for performance, as they are implemented in lower-level languages and are designed to be highly efficient. This ensures that your operations on arrays are executed with minimal overhead.

Less Error-Prone: By relying on well-tested and widely-used array methods, you reduce the risk of introducing bugs and errors into your code.

Example:

Suppose you have an array of numbers and want to find the sum of all even numbers. Instead of manually looping through the array and implementing conditional checks, you can use the reduce array method:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const evenSum = numbers.reduce((acc, num) => {
  if (num % 2 === 0) {
    return acc + num;
  }
  return acc;
}, 0);

console.log(evenSum); // Output: 20

II. How Array Methods Simplify Your Code Structure
Consider the scenario where you need to transform each element of an array into uppercase. Using a traditional loop, this might involve writing multiple lines of code. However, with array methods like map, you can achieve the same result more concisely:

const fruits = ['apple', 'banana', 'orange'];

const capitalizedFruits = fruits.map(fruit => fruit.toUpperCase());

console.log(capitalizedFruits); // Output: ["APPLE", "BANANA", "ORANGE"]

The map method applies a function to each element of the array and returns a new array containing the transformed elements. This not only simplifies the code but also makes it easier to understand your intent at a glance.

In this guide, we'll explore a variety of array methods, from the basic ones like forEach, map, and filter, to more advanced methods like reduce and concat. By the end, you'll have a solid grasp of how to leverage these methods to enhance the efficiency and readability of your JavaScript code.

2. Understanding Basic Array Methods

Arrays in JavaScript become even more powerful with the use of array methods that provide intuitive ways to manipulate and transform array elements. Let's dive into some fundamental array methods:

I. Using the forEach Method

The forEach method allows you to iterate through each element of an array and perform a specified action for each element. It's particularly useful when you want to execute a function for its side effects, such as logging or modifying the array in place.

Example:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  console.log(number * 2);
});

// Output:
// 2
// 4
// 6
// 8
// 10

II. How to Map Array Data

The map method creates a new array by applying a function to each element of the original array. It's often used to transform data without modifying the original array.

Example:

javascript
Copy code
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  console.log(number * 2);
});

// Output:
// 2
// 4
// 6
// 8
// 10

II. How to Map Array Data
The map method creates a new array by applying a function to each element of the original array. It's often used to transform data without modifying the original array.

Example:

const temperaturesCelsius = [25, 30, 18, 22, 28];

const temperaturesFahrenheit = temperaturesCelsius.map(tempC => (tempC * 9/5) + 32);

console.log(temperaturesFahrenheit); // Output: [77, 86, 64, 71.6, 82.4]

III. How to Use the Filter Method
The filter method creates a new array containing elements that pass a certain condition specified by a callback function. It's handy for extracting specific items from an array.

Example:

const ages = [18, 25, 30, 16, 22, 40];

const eligibleAges = ages.filter(age => age >= 18 && age <= 35);

console.log(eligibleAges); // Output: [18, 25, 30, 22]

These basic array methods provide the foundation for efficiently working with arrays in JavaScript. They allow you to iterate, transform, and filter arrays, paving the way for more advanced operations. As we move forward, we'll explore additional methods that delve deeper into the world of array manipulation.

3. Implementing Iterative Array Methods

Iterative array methods are essential tools for working with arrays in JavaScript. They allow you to perform operations on array elements by iterating over each element. Let's explore two widely used iterative array methods: forEach and map.

Using the forEach Method:

The forEach method is used to loop through each element of an array and apply a given function to it. It's particularly useful when you want to perform an action on each element without necessarily creating a new array.

Example:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  console.log(number * 2);
});

// Output:
// 2
// 4
// 6
// 8
// 10

Using the map Method:

The map method creates a new array by applying a function to each element of the original array. This is especially handy when you want to transform the data in the array without modifying the original array.

Example:

const temperaturesCelsius = [25, 30, 18, 22, 28];

const temperaturesFahrenheit = temperaturesCelsius.map(tempC => (tempC * 9/5) + 32);

console.log(temperaturesFahrenheit); // Output: [77, 86, 64, 71.6, 82.4]

These iterative methods offer concise ways to work with arrays. While forEach is suitable for actions with side effects, map is ideal for creating a new array based on the transformation of existing elements. By utilizing these methods effectively, you can simplify your code and enhance its readability.

4. Understanding Searching and Sorting

Searching for specific elements and sorting the contents of an array are common tasks when working with data. JavaScript provides array methods to help you efficiently accomplish these tasks. Let's explore find, indexOf, and sort.

Using the find Method:

The find method is used to search for the first element in an array that satisfies a given condition. It returns the value of the first element found, or undefined if no matching element is found.

Example:

const fruits = ['apple', 'banana', 'orange', 'grape'];

const fruitWithSixLetters = fruits.find(fruit => fruit.length === 6);

console.log(fruitWithSixLetters); // Output: 'banana'

Using the indexOf Method:
The indexOf method returns the index of the first occurrence of a specified element in an array. If the element is not found, it returns -1.

Example:

const numbers = [10, 20, 30, 40, 50];

const indexOfThirty = numbers.indexOf(30);

console.log(indexOfThirty); // Output: 2

Using the sort Method:

The sort method is used to rearrange the elements of an array in place according to their Unicode values. It can take an optional comparison function to specify a custom sorting order.

Example:

const fruits = ['banana', 'apple', 'orange', 'grape'];

fruits.sort();

console.log(fruits); // Output: ['apple', 'banana', 'grape', 'orange']

Remember that sort sorts based on Unicode values, which might not always yield the desired results for numerical or more complex sorting. In such cases, a custom comparison function is essential.

These array methods allow you to effectively search for specific elements and organize the contents of your arrays. By leveraging these methods, you can make your code more efficient and maintainable when dealing with data manipulation tasks.

5. Manipulating Arrays with Array Methods

Array methods not only help you retrieve and transform data but also enable you to manipulate arrays by adding, removing, and modifying elements. Let's explore key manipulation methods: push, pop, shift, unshift, and splice.

I. Understanding the Difference and Usage of push and pop Methods:

The push method adds one or more elements to the end of an array, while the pop method removes the last element from the end of an array.

Example:

const stack = [];

stack.push('apple');
stack.push('banana');

console.log(stack); // Output: ['apple', 'banana']

const removedElement = stack.pop();

console.log(removedElement); // Output: 'banana'
console.log(stack); // Output: ['apple']

II. Why and When to Use the shift and unshift Methods:

The shift method removes the first element from the beginning of an array, and the unshift method adds one or more elements to the beginning of an array.

Example:

const queue = ['apple', 'banana', 'orange'];

const removedElement = queue.shift();

console.log(removedElement); // Output: 'apple'
console.log(queue); // Output: ['banana', 'orange']

queue.unshift('grape');

console.log(queue); // Output: ['grape', 'banana', 'orange']

shift and unshift can be used to implement a queue-like behavior, where elements are added to the end and removed from the beginning of an array.

III. The Importance of Using the splice Method:

The splice method allows you to add, remove, or replace elements at a specified index in an array.

Example:

const numbers = [1, 2, 3, 4, 5];

// Remove elements at index 2 and add 6 and 7
numbers.splice(2, 2, 6, 7);

console.log(numbers); // Output: [1, 2, 6, 7, 5]

The splice method is versatile and can be used for various array manipulations, such as adding or removing elements at specific positions.

These manipulation methods provide the tools needed to modify arrays according to your requirements. By utilizing these methods effectively, you can easily control the contents of your arrays to meet your program's needs.

6. The Essence of Reduction and Accumulation in JavaScript

The concepts of reduction and accumulation involve processing an array's elements to produce a single value. This is where the reduce method comes into play. Additionally, the reduceRight method is used to perform the same operation but in reverse order.

I. Understanding the reduce Method:
The reduce method iterates over an array's elements and accumulates a single value based on a provided callback function. This callback function takes an accumulator and the current element as arguments and returns the updated accumulator. The final value is the result of this accumulation process.

Example:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // Output: 15

In this example, the reduce method calculates the sum of all elements in the numbers array.

II. Why Should You Use the reduceRight Method?

The reduceRight method is similar to reduce, but it starts from the last element of the array and iterates towards the first element. This is particularly useful when the order of accumulation matters, such as when processing elements that depend on previous elements.

Example:

const strings = ['a', 'b', 'c'];

const concatenatedString = strings.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
}, '');

console.log(concatenatedString); // Output: 'cba'

Here, the reduceRight method concatenates the strings in reverse order, producing the string 'cba'.

Both reduce and reduceRight methods provide a powerful way to accumulate values from an array while applying a custom operation. By harnessing these methods, you can perform complex calculations and data transformations efficiently and elegantly.

7. Combining Arrays in JavaScript

Combining arrays is a common operation when you want to merge two or more arrays into a single array. JavaScript offers the concat method as a simple way to achieve this.

Using the concat Method:

The concat method is used to combine multiple arrays, creating a new array that contains the elements from all the arrays in the order they were provided.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

const combinedArray = array1.concat(array2, array3);

console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

In this example, the concat method combines the elements from array1, array2, and array3 into a single array.

The concat method doesn't modify the original arrays; it creates a new array that contains the combined elements. This makes it a non-destructive way to merge arrays.

By utilizing the concat method, you can easily bring together the contents of multiple arrays without altering the source arrays, making it a valuable tool for array manipulation in JavaScript.

8. Combining Arrays with the concat Method

The concat method in JavaScript allows you to merge two or more arrays into a single array without modifying the original arrays. It's a versatile way to create a new array containing the combined elements from multiple arrays. Let's explore how to use the concat method with code snippets.

Example:

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

// Using concat to combine arrays
const combinedArray = array1.concat(array2, array3);

console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

In this example, the concat method combines the elements from array1, array2, and array3 to create a new array called combinedArray. The order of concatenation is based on the sequence in which the arrays are provided as arguments.

Combining Arrays with Variables:

You can also combine arrays stored in variables using the concat method.

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'broccoli'];

const combinedFood = fruits.concat(vegetables);

console.log(combinedFood); // Output: ['apple', 'banana', 'carrot', 'broccoli']

Combining Arrays and Values:

The concat method is not limited to arrays; you can also concatenate other values to an array.

const initialArray = [1, 2, 3];
const newValue = 4;

const newArray = initialArray.concat(newValue);

console.log(newArray); // Output: [1, 2, 3, 4]

By leveraging the concat method, you can seamlessly merge arrays and values to create new arrays that suit your specific needs, all while keeping your original arrays intact.

9. Chaining Array Methods in JavaScript

Chaining array methods involves applying multiple array methods one after another on the same array. This technique can lead to concise and expressive code, making complex operations more readable and efficient. Let's delve into the concept of chaining array methods and its benefits.

I. Understanding Chaining Method:

Chaining array methods means calling one array method immediately after another on the same array, with each method operating on the result of the previous method. This allows you to perform a series of operations sequentially without creating intermediate arrays or variables.

Example:

const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .filter(number => number % 2 === 0) // Filter even numbers
  .map(evenNumber => evenNumber * 2) // Double each even number
  .reduce((sum, doubledNumber) => sum + doubledNumber, 0); // Sum the doubled numbers

console.log(result); // Output: 18

In this example, we filter even numbers, double them using map, and then sum the doubled numbers using reduce. The chaining of these methods eliminates the need for intermediate arrays and makes the code more streamlined.

II. Benefits of Chaining Method:

Readability: Chaining array methods makes the code more linear and readable. Each method call is aligned vertically, making it easier to understand the sequence of operations.

Efficiency: Chaining avoids creating intermediate arrays, saving memory and improving performance. This is especially important when dealing with large datasets.

Expressive Code: Chaining allows you to express complex operations succinctly, making your intentions clear without verbose code.

Modularity: Chained methods are modular, allowing you to modify or extend operations easily by adding or removing methods in the chain.

Chaining Multiple Operations:

const words = ['apple', 'banana', 'cherry', 'date'];

const result = words
  .filter(word => word.length > 5) // Filter words with length > 5
  .map(filteredWord => filteredWord.toUpperCase()) // Convert to uppercase
  .join(', '); // Join into a comma-separated string

console.log(result); // Output: "BANANA, CHERRY"

By chaining array methods, you can create powerful sequences of operations that elegantly manipulate and transform data while maintaining readability and performance.

10. Conclusion

In conclusion, array methods in JavaScript are essential tools that empower developers to efficiently manipulate, transform, and work with arrays. These methods provide a structured and intuitive way to handle a wide range of tasks, from iterating over elements to searching, sorting, and accumulating values. By understanding and utilizing array methods effectively, you can write cleaner, more readable, and more maintainable code. Whether you're a beginner or an experienced programmer, mastering array methods will undoubtedly enhance your ability to work with arrays and streamline your JavaScript programming journey.

11. References:

Chakra UI or Tailwind CSS, Which is the Ultimate choice?

Adeeko Tobiloba Isreal — Tue, 18 Apr 2023 01:38:48 +0000

Are you tired of the same old boring CSS? Are you looking for a way to spice up your UI design without sacrificing accessibility and performance? Look no further, because Tailwind CSS and Chakra UI are here to save the day! These two popular CSS frameworks offer unique approaches to styling your UI components, but which one is the best for your project? In this article, we'll explore the notable differences between Tailwind CSS and Chakra UI, including their design philosophies, code snippets, and even their build and runtime performance. So grab a cup of coffee and get ready to compare and contrast, because it's time to decide which one reigns supreme: Tailwind CSS or Chakra UI!

Now let's get to it!

Tailwind CSS and Chakra UI are two popular UI component libraries that have been widely adopted by developers worldwide. Both have their own set of advantages and disadvantages, but there are some notable core differences between the two. In this article, we will take a closer look at these differences and explore why Chakra UI is the best choice for developers.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that focuses on providing pre-defined CSS classes that can be used to style HTML elements. It offers a wide range of classes that can be used to apply styles such as padding, margin, typography, and colors to elements. Developers can use these classes to create complex layouts and styles without writing any CSS code.

One of the main advantages of Tailwind CSS is its flexibility. Since it provides a wide range of pre-defined classes, developers can quickly create custom styles that fit their needs. Additionally, Tailwind CSS is designed to be highly customizable, so developers can configure and extend it to meet their specific requirements.

Here's an example of how you can use Tailwind CSS to style a button:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

In this example, we're using Tailwind CSS classes to set the background color, text color, font weight, padding, and border radius of the button. This allows us to quickly create a stylish button without writing any vanilla CSS code.

Chakra UI

Chakra UI is a component library that provides a set of reusable UI components that can be used to create complex UIs. It focuses on providing a set of high-quality, accessible components that can be used to build responsive, user-friendly interfaces. Chakra UI is built on top of styled-system, a library that provides a set of functions for styling components.

One of the main advantages of Chakra UI is its accessibility. All components are designed to meet accessibility standards and can be easily customized to meet specific accessibility requirements. Additionally, Chakra UI provides a consistent design system that can be used to create cohesive UIs across different pages and applications.

Here's an example of how you can use Chakra UI to create a button:

<Button colorScheme="blue" size="md">
  Click me
</Button>

In this example, we're using the Chakra UI Button component to create a button with a blue color scheme and a medium size. This allows us to quickly create a high-quality, accessible button without writing any CSS code.

Why Chakra UI is the best choice?

While both Tailwind CSS and Chakra UI have their own set of advantages, Chakra UI is the best choice for developers who prioritize accessibility and consistency in their UIs. Chakra UI provides a set of high-quality, accessible components that can be easily customized to meet specific requirements. Additionally, Chakra UI's focus on consistency allows developers to create cohesive UIs across different pages and applications.

Here's an example of how you can use Chakra UI to create a form:

<Formik
  initialValues={{ email: '', password: '' }}
  onSubmit={values => console.log(values)}
>
  <Form>
    <FormControl isRequired>
      <FormLabel>Email address</FormLabel>
      <Input type="email" name="email" />
    </FormControl>
    <FormControl isRequired>
      <FormLabel>Password</FormLabel>
      <Input type="password" name="password" />
    </FormControl>
    <Button mt={4} colorScheme="blue" type="submit">
      Submit
    </Button>
  </Form>
</Formik>

In this example, we're using Chakra UI components to create a form that collects an email and password from the user. The Formik component is used to handle form submission and validation, while the Chakra UI Input, FormControl, and FormLabel components are used to create the form fields. The Button component is used to create the form submission button.

This example demonstrates how easy it is to create complex forms using Chakra UI. The components are designed to work together seamlessly, which makes it easy for developers to create consistent and accessible UIs.

Build and runtime performance
When it comes to build and runtime performance, both Tailwind CSS and Chakra UI perform very well. However, there are some differences between the two that are worth noting.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework, which means that it generates a lot of CSS classes. This can result in larger CSS files and longer build times, especially if you're using a lot of custom classes. However, Tailwind CSS is designed to be highly customizable, so you can configure it to only include the classes that you need, which can help to reduce the size of your CSS files.

In terms of runtime performance, Tailwind CSS generates very efficient CSS that is optimized for modern browsers. This means that your pages will load quickly and the user experience will be fast and smooth.

Chakra UI

Chakra UI is built on top of styled-system, which is a library that uses a theme-based approach to styling components. This means that Chakra UI generates fewer CSS classes than Tailwind CSS, which can result in smaller CSS files and shorter build times. Additionally, Chakra UI provides a set of pre-built themes that you can use to quickly style your components, which can help to reduce the amount of custom CSS that you need to write.

In terms of runtime performance, Chakra UI generates very efficient CSS that is optimized for modern browsers. Additionally, Chakra UI provides a set of performance optimizations that can help to reduce the amount of work that the browser needs to do when rendering your components. This can result in faster page load times and a smoother user experience.

The question here now is why i think Chakra is a great choice over tailwind css?
I was opportuned to come accross a blog post of Segun Adebayo which is the author of chakra ui, and i was impressed by some new improvements being incorporated into chakra which i will highlight in this article.

Breaking the monolith

Chakra UI is a large framework with many different features like components, theming, and styling all tied together. This can make it difficult for developers to understand and contribute to the codebase, leading to longer bug fixing times. To make it easier to work with, we're breaking Chakra UI down into smaller, independent projects that are easier to manage and understand.
To reduce the complexity, we're splitting up the big ideas in Chakra into smaller, manageable and independent projects. Here's a quick overview:

This image better explains the architecture they're willing to achieve with chakra.

I'll be talking about the architecture of this image in this section in simple words.

Styled System(zero runtime css-in-js[Panda]): Developers love using style props and runtime CSS-in-JS to create dynamic UI components that are easy to use. However, these features can slow down the performance of the application. To solve this problem, we're building a new styling solution called Panda that will extract styles at build time, which means the application will run faster. Panda will also use new platform features like CSS variables and cascade layers to make styling even easier for developers.

State Machine + Accessibilty (using zag): Chakra UI is designed to make interactive components easy to use, no matter what framework you're using. We achieve this by modeling every component as a state machine. This means that we carefully plan out how the component will change and behave in different states, making it predictable and easy to maintain. By using this approach, we can create components that are easy to debug and understand, which will ultimately make your development process smoother.

Here is an example of how to build a number input component using zag in react.

  // 1. Import the state machine
  import * as numberInput from '@zag-js/number-input';

  // 2. Import the React bindings
  import { useMachine, normalizeProps } from '@zag-js/react';

  export function NumberInput() {
    // 3. Consume the machine
    const [state, send] = useMachine(numberInput.machine({ id: '1', max: 50, min: -50 }));

    // 4. Convert machine to a user friendly API
    const api = numberInput.connect(state, send, normalizeProps);

    // 5. Render the component
    return (
      <div {...api.rootProps}>
        <label {...api.labelProps}>Enter number:</label>
        <div>
          <button {...api.decrementButtonProps}>DEC</button>
          <input {...api.inputProps} />
          <button {...api.incrementButtonProps}>INC</button>
        </div>
      </div>
    );
  }

Isn't this a great leap that you can manage your states and also make them reuseable accross
components?

Zag.js is our low-level state machine library used to build all the components in Chakra
UI. We aim to develop a robust set of application and e-commerce components that works in
most JS frameworks.
To learn more about Zag.js, check out the docs here: https://zagjs.com, or you can watch
my demo on the Learn with Jason show here: https://www.youtube.com/watch?v=l8HJoE_ktDc

Headless Components: Building UI components with State machines sounds exciting but can sometimes sound complex or scary. It sometimes gives the impression that you need to know, or at least learn, about state machines before you can use them. That's not the case (at all).

To increase adoption, we're wrapping Zag.js component logic into a headless component library you can use to build your applications and design systems with speed.

import { NumberInput } from '@ark-ui/react';

export function Demo() {
  return (
    <NumberInput min={-50} max={50}>
      <NumberInput.Label>Label</NumberInput.Label>
      <NumberInput.Field />
      <NumberInput.Control>
        <NumberInput.DecrementTrigger>
          <button>-1</button>
        </NumberInput.DecrementTrigger>
        <NumberInput.IncrementTrigger>
          <button>+1</button>
        </NumberInput.IncrementTrigger>
      </NumberInput.Control>
    </NumberInput>
  );
}

The Chakra team created a new library called Ark, which will be the headless component foundation for Chakra UI.

It's open source and you can check it out here: https://github.com/chakra-ui/ark

Design token platform [Ultra]: Design tokens are quickly becoming the standard for managing design decisions in a product or website today. They're a powerful concept that allows you to build a design system that is flexible, scalable, and maintainable.

Chakra UI today supports a theming system that allows you to customize design tokens and components at any level of granularity. We also added basic support for semantic tokens to enable developers to build automatic light and dark modes into their applications. Most enterprise applications require more than just light and dark modes.

Beyond authoring design tokens, transforming and distributing tokens to different platforms and projects is a huge pain point for most design systems.

We're building Ultra, a SaaS platform that will allow product teams:

Create core and semantic design tokens visually (without it feeling like grunt work)
Define best practices, shared layers and text styles across your project
Provides automatic documentation for your tokens with a GPT interface for searching and filtering
Distribute design tokens to different platforms and project

In conclusion this particular framework Chakra UI has a great potential amongst its peers. It seems like a no-brainer to get inclined and familiar with its concept and use it to achieve efficiency and speed in styling your product. I mean isn't that what we've always wanted to achieve as developer? Speed and Efficiency, in which chakra will be serving on a platter of Gold.

To read more on the chakra latest updates you can check through this link: https://www.adebayosegun.com/blog/the-future-of-chakra-ui

If this is helpful drop a like and also your comments and criticism are welcomed.

How to Fetch and Write data into firestore cloud. Beginners Guide.

Adeeko Tobiloba Isreal — Thu, 13 Apr 2023 16:07:56 +0000

Introduction

Are you tired of keeping your data scattered across multiple platforms and devices? Do you want to streamline your data management process and access all your information in one place? Look no further than Firestore Cloud! With Firestore, you can easily store and manage your data in the cloud, and access it from anywhere at any time. In this beginner's guide, we'll show you how to fetch and write data into Firestore Cloud, step-by-step.

Table of content

Setup Firebase for your project.
Setup your react project
Connect and Initialize Firebase to your project
Create Firestore Database in your firebase console.
Write data to your firestore cloud
Read data from your firestore cloud

Setup Firebase for your project: This is one of the most crucial yet basic part of setting up your firebase console for your application. So in other to make things easy. I'll walking you through images of each step on how to setup firebase console for your application.

step 1: Go to Firebase Link. Sign up and login to firebase. So that your console can be created.

step 2:

Now that you have your console setup. You can proceed to click on the Add Project box to get started with initiating your project.

step 3:

As shown in the image follow the prompt by adding the name of the project you chose. As for me attendance-app works fine.

step 4:

So this page explains the features you'll be getting on your console for free. Nothing much to see here though. Just to fulfill all righteousness i gotta include it. Click continue let's get on with this 😎.

step 5:

Click the dropdown and select the Default account for firebase then continue.

step 6:

Cool.. We're getting very close to the cool stuff. Our app console has been successfully created on firebase.

Not assuming you already have a project setup yet.
You can easily setup your react project by using this command in your terminal
npx create-react-app attendance-app. There are other frameworks out there that you can also use to with firebase. Which are Vuejs, Nextjs, Angularjs... and any other frontend framework you know about. Its not quantum physics to set firebase up with any of them, pretty much similar steps to follow.

In this article we're going to be using a react project.

After creating your application in your terminal.
Navigate to the folder in which you have created your project and open it in vscode or which ever IDE you're using. My favorite is Vscode though.

Setup your react project: Now take a sneak peak of the folder structure of one of the react projects. I'm working on.

In this image you'll notice there is a firebase.js file in there. Yes this is where firebase is being connected to your project. To get started on that you have to follow these steps.

Go to your firebase console.
Click on the settings icon next to Project Overview on the left pane of your firebase console dashboard.
Click on project settings and scroll to the bottom of the page. You'll find a detailed set on how to add firebase to your project.
Open your terminal and navigate to your project directory.
Type npm install firebase to have it installed in your project.
Then create a firebase.js file.
Add this code in the firebase file.

//Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
 //TODO: Add SDKs for Firebase products that you want to use
 //https://firebase.google.com/docs/web/setup#available-libraries`

 //Your web app's Firebase configuration
 //For Firebase JS SDK v7.20.0 and later, measurementId is optional
 const firebaseConfig = {
  apiKey: "******************************",
  authDomain: "******************************.firebaseapp.com",
  projectId: "attendance-app-******************************,
  storageBucket: "******************************.appspot.com",
  messagingSenderId: "***********",
  appId: "1:******************************",
  measurementId: "******************************"
  };

  //Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);

You'll find the necessary data i excluded from this code block in your firebase console.

Create Firestore Database in your firebase console: To do these we'll be going through another set of graphics to better visualize our steps.
a.

..Click on build on the left panel
..Click on Firestore Database as highlighted in the image above.
..Click on the create database button, then you'll be prompted to setup in production in a modal.
..Click on the closest location to you and hit continue button.

Then you'll have a view of your database.
Kindly read up on firestore rules as you might need it for specific functions in your database. Firestore Rules

Writing Data to your database Firestore

Firstly you have to reference the database in any file you want to initialize the write data function

import { getDatabase } from "firebase/database";

const database = getDatabase();

This function below allows you to write data into your firestore database

import { getDatabase, ref, set } from "firebase/database";

function writeUserData(userId, name, email, imageUrl) {
  const db = getDatabase();
  set(ref(db, 'users/' + userId), {
    username: name,
    email: email,
    profile_picture : imageUrl
  });
}

Reading Data from your database Firestore

Firstly you have to reference the database in any file you want to initialize the read data function

import { getDatabase } from "firebase/database";

const database = getDatabase();

import { getDatabase, ref, child, get } from "firebase/database";

const dbRef = ref(getDatabase());
get(child(dbRef, `users/${userId}`)).then((snapshot) => {
  if (snapshot.exists()) {
    console.log(snapshot.val());
  } else {
    console.log("No data available");
  }
}).catch((error) => {
  console.error(error);
});

You can also read the firebase documentation for your reference. https://firebase.google.com/docs/database/web/read-and-write?hl=en&authuser=0

Thank you for going this far. Like and drop comments if this was helpful, and i'm open to questions or constructive criticism.

Have a bug-filled day 😃

Fixing baseURL error in Nextjs-auth0

Adeeko Tobiloba Isreal — Mon, 01 Aug 2022 02:27:10 +0000

Contrary to the YouTube tutorial and auth0 documentation that I followed diligently while setting up my code of nextjs and auth0 authentication, still i encountered this error and it took awhile to find a solution to fix the error. Talk is cheap show me the code.

👾 Let’s dive right into fixing the error.

Error image.

If you’re getting this exact error then i have the exact fix for you in this article.

Prerequisite:

In your _app.js you should import UserProvider and wrap it around the component.

import "../styles/globals.css";
import { UserProvider } from "@auth0/nextjs-auth0";

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

export default MyApp;

Step One:

Make sure you have your .env.local file created in the root of your app.

Step Two:

The contents of you .env.local file should be arranged in this format.

AUTH0_SECRET='random generated number' AUTH0_BASE_URL='http://localhost:3000' AUTH0_ISSUER_BASE_URL='https://YOUR_DOMAIN_AUTH0_DASHBOARD' AUTH0_CLIENT_ID='CLIENT_ID_AUTH0_DASHBOARD' AUTH0_CLIENT_SECRET='CLIENT_SECRET_AUTH0_DASHBOARD'

Step Three:

In your pages/api/auth/[…auth0].js file.

// pages/api/auth/[...auth0].js
import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth({
    baseUrl: process.env.AUTH0_BASE_URL
});

This is the file where the error comes from.

Contrary to what is in the auth0 documentation for nextjs which is the snippet below.

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

This will definitely throw an error because the handleauth isn’t able to read the baseUrl from the env.local file.

Step Four:

The last step is to navigate to the authentication url in your browsers’ url.

Add the api/auth/login to your localhost url

http://localhost:3000/api/auth/login

If this helped solve the error you’ll get this in your browser’s http://localhost:3000/api/auth/login

😜 Finally! Problem solved.

If this helped follow my twitter handle @celebrity_dev