JavaScript

Is Angular better than React?

Angular and React are both great front-end frameworks used for building dynamic web applications. While both have their own set of benefits, Angular has a slight edge over React in certain areas.

Here are a few reasons why Angular is a little better than React:

Comprehensive framework: Angular is a full-featured framework that provides many features out of the box, such as built-in routing, form validation, and dependency injection. React, on the other hand, is a lightweight library that only provides the essential tools needed to build a web application.

Two-way data binding: Angular’s two-way data binding allows for efficient data synchronization between the model and the view, making it easier to manage complex applications. React, on the other hand, uses a one-way data flow, which can sometimes lead to more complex code and a steeper learning curve.

Strongly-typed language: Angular uses TypeScript, a strongly-typed language that allows for better code organization, catch errors early on, and provide better tooling support. React, on the other hand, uses JavaScript, which is a dynamically-typed language that can sometimes lead to errors that are difficult to catch.

Consistent coding standards: Angular has a set of coding standards and best practices that help ensure that code is consistent and maintainable, making it easier for developers to work on large codebases. React, on the other hand, is more flexible, which can sometimes lead to inconsistencies in code style and structure.

While React is still a great option for building web applications, Angular’s comprehensive framework, two-way data binding, strongly-typed language, and consistent coding standards give it a slight edge over React in terms of ease of use, maintainability, and scalability.

How to fix ion-checkbox stealing clicks on ion-item elements

How to fix ion-checkbox stealing clicks on ion-item elements.

I found this annoying issue with Ionic 5 where clicking on ion-label inside ion-item can’t be clicked if there is also an ion-checkbox element.

You have to change the z-index on the element you want clickable.

// component css
ion-label{
   z-index: 3;
}

You can also disable button property on ion-item, check the docs here.

You can also apply this to any other element you want to use inside ion-item. Good luck!

How to Implement Merge Sort in JavaScript

How to Implement Merge Sort in JavaScript the easy way.


// Split the array into halves and merge them recursively 
function mergeSort (arr) {
  if (arr.length === 1) {
    // return once we hit an array with a single item
    return arr
  }

  const middle = Math.floor(arr.length / 2) // get the middle item of the array rounded down
  const left = arr.slice(0, middle) // items on the left side
  const right = arr.slice(middle) // items on the right side

  return merge(
    mergeSort(left),
    mergeSort(right)
  )
}

// compare the arrays item by item and return the concatenated result
function merge (left, right) {
  let result = []
  let indexLeft = 0
  let indexRight = 0

  while (indexLeft < left.length && indexRight < right.length) {
    if (left[indexLeft] < right[indexRight]) {
      result.push(left[indexLeft])
      indexLeft++
    } else {
      result.push(right[indexRight])
      indexRight++
    }
  }

  return result.concat(left.slice(indexLeft)).concat(right.slice(indexRight))
}

const list = [2, 5, 1, 3, 7, 2, 3, 8, 6, 3];
console.log(mergeSort(list)) // [ 1, 2, 2, 3, 3, 3, 5, 6, 7, 8 ];