Forem: Temitope Ayodele

Logical Assignment Operators

Temitope Ayodele — Mon, 30 Jan 2023 17:40:39 +0000

Logical Assignment Operators was introduced in the ECMAScript 2021 update. It is a new feature that combines the assignment operators with the logical operators (||, &&, ??). It that allows you to assign a value to a variable if true (&&=), false (||=) or null (??=).

Types of Logical Assignment Operators

Logical OR assignment operator ||=
Logical AND assignment operator &&=
Nullish coalescing assignment operator ??=

Logical OR assignment operator ||=

This accessor is used to assign a value to a variable if the variable is not already assigned. If the variable is already assigned, the value is not changed.

//Syntax

a ||= b

This syntax is also similar to:

if (!a) {
  a = b
}

An example is

let a = 0
a ||= 1
console.log(a) // 1

The above example assigns the value 1 to the variable a if the variable is not already assigned. If the variable is already assigned, the value is not changed.

Logical AND assignment operator &&=

This is used to assign a value to a variable only if the value is a truthy

// Syntax

a &&= b

This syntax is also similar to:

if (a) {
  a = b
}

An example is

let a = 0
a &&= 1
console.log(a) // 0

In the above example, a is a falsy value, so it will not be reassigned. It will only reassign if the value is truthy.

let a = 4
a &&= 1
console.log(a) // 1

Nullish coalescing assignment operator ??=

This is similar to the Logical OR assignment operator ||=, however, it only reassigns if the left operand is null or undefined.

// Syntax

a ??= b

This syntax is also similar to:

if (typeof a === "undefined" || a === null) {
  a = b
}
let a = 0
a ??= 1
console.log(a) // 0
let b = null
b ??= 1
console.log(b) // 1

Logical Operators

Temitope Ayodele — Fri, 03 Dec 2021 21:40:47 +0000

Logical operators are very useful in Javascript as they allow you to compare values and assign a value to a variable if it marches the condition.

There are a four logical operators

Types of Logical Operators

Logical OR operator ||
Logical AND operator &&
Logical NOT operator !
Nullish coalescing operator ??

Logical OR

This is represented with double pipe ||. It returns the first truthy value of the expression. It is a short-circuit evaluation, so it stops evaluating the right operand if the left operand is true, that is, it keeps processing the arguments until it finds a truthy value and returns immediately, or until it reaches the end of the arguments.
In other words, for the expression to be evaluated as true, one of the operands must be true. If the left operand is true, it evaluates to true even if the right operand is false. If the left operand is false, it evaluates to the right operand. Any value is allowed as an operand. The operand is converted to boolean and if it evaluates to true, it returns the original value, otherwise it returns the right operand.

//Syntax
true || true // true
true || false // true
false || true // true
false || false // false

let firstName = ""
let lastName = ""

console.log(firstName || lastName || "Anonymous") // Anonymous

Logical AND:

This is represented with the double ampersand &&. It returns the first falsy value of the expression. For the expression to be evaluated as true, both operands must be true. If the left operand is false, it evaluates to false even if the right operand is true. If the left operand is true, it evaluates to the right operand. It is also a short-circuit evaluation, so it stops evaluating the right operand if the left operand is false, that is, it keeps processing the arguments until it finds a false value and returns immediately, or until it reaches the end of the arguments.

//Syntax
true && true // true
true && false // false
false && false // false

console.log(1 && 2 && null && 3) // null

Logical NOT:

It is represented with the exclamation sign !. It accepts only one value as an operand and negates the value. It converts the operand to boolean, if it evaluates to true, it returns false, otherwise it returns true. (ie, return the inverse value)

!true // false
!false // true
!0 // true

const employed = true
console.log(!employed) // false

In the example above, employed is true, but adding the logical NOT (!) operator to it, negates it, hence it will return false.
This operator is based on a set of rules

let a
// If a is undefined, the result is true.
a = undefined
console.log(!a) // true
// If a is null, the result is true.
a = null
console.log(!a) // true
// If a is a number other than 0, the result is false.
a = 42
console.log(!a) // false
// If a is NaN, the result is true.
a = NaN
console.log(!a) // true
// If a is an empty string, the result is true. In case a is a non-empty string, the result is false
a = ""
console.log(!a) // true
a = "test string"
console.log(!a) // false
// If a is an object, the result is false.
a = {}
console.log(!a) // false

Nullish Coalescing:

This is represented by two question marks ??. It returns the right operand if the left operand is null or undefined. If the left operand is not null or undefined, it returns the left operand. It returns the first truthy value of the expression.

//Syntax
null ?? "default" // "default"

const foobar = null ?? "fallback"
console.log(foobar) // 'fallback'

const bar = "rice" ?? "beans"
console.log(bar) // 'rice'

// Example 2

const staff = {
  name: "John",
  age: 30,
  isAdmin: true,
}

const staffName = staff.name ?? "Guest"
const staffAge = staff.age ?? 18
const staffAddress = staff.address ?? "Unknown"
const staffIsAdmin = staff.isAdmin ?? false

console.log(staffName, staffAge, staffAddress, staffIsAdmin) // John 30 Unknown true

ORDER OF PRECEDENCE OF LOGICAL OPERATORS

The logical operators are evaluated from left to right., but when used together in an expression there is an order of precedence. The order of precedence is:

1. Logical NOT
2. Logical AND
3. Logical OR
4. Nullish Coalescing

Logical Operator	PRECEDENCE
Logical NOT	High
Logical AND	Medium
Logical OR	Low

For example,

a && b || c is evaluated as (a && b) || c
a || b && c is evaluated as a || (b && c)
a && b && c || d is evaluated as (a && b && c) || d
a || b || c && d is evaluated as a || b || (c && d)
a && b || c && d is evaluated as (a && b) || (c && d)
!(a && b) || c && d is evaluated as (!(a && b) || (c && d))
!a || b && c is evaluated as !a || (b && c)
!a && b || c is evaluated as (!a && b) || c

Parentheses can be used to clarify the precedence of the logical operators. For example, the following expression is evaluated as (a && b) || c: (a && b) || c. The parentheses are not necessary, but they are used to clarify the precedence of the logical operators. The following expression is evaluated as a || (b && c): a || (b && c).

(a && b) || c is evaluated as (a && b) || c
(a || b) && c is evaluated as (a || b) && c

DIFFERENCE BETWEEN LOGICAL OR AND NULLISH COALESCING ( || vs ??)

The OR operator uses the right operand if the left operand is falsy, but the Nullish coalescing operator uses the right operand if the left operand is null or undefined, ie, only null and undefined are falsy.

Falsy values for OR operator: false, 0, "", null, undefined

Falsy values for null coalescing operator: null, undefined

false || "age" // 'age'
false ?? "age" // false

null || "age" // 'age'
null ?? "age" // 'age'

"" || "age" // 'age'
"" ?? "age" // ''

0 || "age" //'age'
0 ?? "age" //0

When should you use either the logical OR or the nullish coalescing operator?
?? only works for null and undefined values, so only use this if false, 0 or an empty string are valid values for your expression and you only want to protect against null or undefined.

|| use this when you expect your value to be valid and not have any falsy values, that is, you don't expect an empty string or 0 or false, or null or undefined.

Markdown cheatsheet

Temitope Ayodele — Tue, 09 Feb 2021 20:14:21 +0000

Originally published on my blog

You can style texts on the web with markdown. Markdown files use the .md or .mdx extensions. Here is a list of essential markdown syntax that you will mostly use often.

HEADERS

# Heading 1 <h1>
## Heading 2 <h2> 
### Heading 3 <h3>
#### Heading 4 <h4>
##### Heading 5 <h5>
###### Heading 6 <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

BOLD

**I am a bold text**
__I am a bold text__

I am a bold text

ITALICS

*italicized text*
_Italic text_

italicized text

LISTS

Unordered List

- Shoes
- Bags
- Clothes

Shoes
Bags
Clothes

Ordered List

1. Baby
2. Teenager
3. Adult

Baby
Teenager
Adult

CODE

`code`

code

LINK

[inline-style link](https://temmie.me)
[inline-style link with title](https://temmie.me "My portfolio")

inline-style link
inline-style link with title

IMAGE

![descriptive alt text](image.jpg)

BLOCKQUOTE

> blockquote

This is a blockquote

HORIZONTAL RULE

Hyphens
---
Asterisks
***
Underscores
___

Hyphens

Asterisks

Underscores

STRIKETHROUGH

~~This is strikethrough sentence.~~

~~This is strikethrough sentence.~~

TABLE

| Name | Type |
| ----------- | ----------- |
| Temitope | Frontend engineer |
| Ayodele | Coach |

Name	Type
Temitope	Frontend engineer
Ayodele	Coach

INLINE HTML

<h4>My Title</h4>
<p>I really have nothing to write here, lol</p>
<p>Markdown does *not* work well here. Use <strong>HTML tags</strong> instead.</p>

My Title

I really have nothing to write here, lol

Markdown does *not* work well here. Use HTML tags instead.

You can play around the markdown syntax here.

Checkout my articles on my blog

Rounded edges on table rows

Temitope Ayodele — Sat, 30 Jan 2021 17:11:01 +0000

To add border radius to a table row tr, you have to specifically target the first table data td on the row and the last.

tr{
  border-radius: 10px
}

This wont work..

Instead do this:

// Set border-radius on the top-left and bottom-left of the first table data on the table row
td:first-child,
th:first-child {
  border-radius: 10px 0 0 10px;
}

// Set border-radius on the top-right and bottom-right of the last table data on the table row
td:last-child,
th:last-child {
  border-radius: 0 10px 10px 0;
}

Checkout the codepen below

Light theme.. Swoosh! Dark Theme

Temitope Ayodele — Tue, 26 Jan 2021 19:31:48 +0000

Originally written on my blog.

Many people prefer to read on a dark screen, while others prefer the light mode. Giving users the ability to switch between these two modes is a great user experience feature. It is pretty easy to implement this in your code, and in this article, I will work you through how to do this in React using styled-components. I used this method to implement this on my portfolio website

To begin install styled-components

npm install styled-components

You can check out documentation of styled-components

We will now create some components

1. Theme Component

This component will contain your preferred colors for dark mode and light mode.

// theme.js
export const lightTheme = {
  body: "#fffffe",
  header: "#094067",
  text: "#5f6c7b",
  button: "#3da9fc"
};
export const darkTheme = {
  body: "#094067",
  header: "#fffffe",
  text: "#d8eefe",
  button: "#3da9fc"
};

2. Wrapping the app with ThemeProvider

To make this theme available to all pages, the component(in our case, App.js) is wrapped in the ThemeProvider. This way, all styled-components within the ThemeProvider has access to the provided theme, no matter how deep.

import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme";

///STYLED-COMPONENTS
import { H1, Layout, P } from "./styles";

export default function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <Layout>
        <H1>My Awesome App</H1>
        <P>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel....
        </P>
        <Button>Toggle mode</Button>
      </Layout>
    </ThemeProvider>
  );
}

In the above snippet, we wrapped the component with the ThemeProvider and passed the lightTheme to the theme prop.

3. Create Global Stylesheet

With styled components, you can specify global styles that spans across your application. You do this by importing createGlobalStyle from styled-components. Now that our app is wrapped withing the ThemeProvider, every component within it now has access to the theme.

// GlobalStyles.js
import { createGlobalStyle} from "styled-components"
export const GlobalStyles = createGlobalStyle`
  body {
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    font-family: Roboto, sans-serif;
    transition: all 0.4s linear;
  }
  `

4. Accessing the theme prop for styled-components

We can also go ahead to defined colors on our styled-components using the theme props

// styles.js
import styled from "styled-components";

export const Layout = styled.div`
  width: 100%;
  height: 100vh;
  text-align: center;
  padding: 2%;
  box-sizing: border-box;
`;

export const H1 = styled.h1`
  font-size: 2rem;
  color: ${(props) => props.theme.header};
`;

export const P = styled.p`
  font-size: 1.2rem;
  color: ${(props) => props.theme.text};
`;

export const Button = styled.button`
  border: none;
  padding: 0.7rem 1rem;
  background: ${(props) => props.theme.button};
  border-radius: 5px;
  font-weight: 700;
  font-size: 1rem;
  color: ${(props) => props.theme.body};
`;

TOGGLE BETWEEN LIGHT MODE AND DARKMODE

To toggle between the two modes, we can use a custom hook, called the useDarkMode.

// useDarkMode.js
import { useEffect, useState } from "react";
export const useDarkMode = () => {
  const [theme, setTheme] = useState("light");
  const [componentMounted, setComponentMounted] = useState(false);

  const setMode = (mode) => {
    window.localStorage.setItem("theme", mode);
    setTheme(mode);
  };

  const toggleTheme = () => {
    if (theme === "light") {
      setMode("dark");
    } else {
      setMode("light");
    }
  };

  useEffect(() => {
    const localTheme = window.localStorage.getItem("theme");
    if (localTheme) {
      setTheme(localTheme);
    } else {
      setMode("light");
    }
    setComponentMounted(true);
  }, []);

  return [theme, toggleTheme, componentMounted];
};

setMode saves the user's preferred theme in localStorage. This ensures that when the user selects a theme, the preferred choice persists even after the user leaves the app.
toggleTheme function toggles between light theme and dark theme
useEffect lifecycle hook checks on component mounting if there is a previuosly stored theme in the localStorage, if yes, the theme is set to that value. If there isn't the theme is set to light (or dark if you please)

Next we import this custom hook to the App.js

import React, { useEffect } from "react";
import { Button, H1, Layout, P } from "./styles";
import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme";
import { GlobalStyles } from "./GlobalStyles";
import { useDarkMode } from "./useDarkMode";

export default function App() {
//New
  const [theme, toggleTheme, componentMounted] = useDarkMode();
  useEffect(() => {
    if (!componentMounted) {
      return <div />;
    }
    // eslint-disable-next-line
  }, []);
//..New

  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <GlobalStyles />
      <Layout>
        <H1>My Awesome App</H1>
        <P>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel...
        </P>
        <Button onClick={() => toggleTheme()}>Toggle mode</Button>
      </Layout>
    </ThemeProvider>
  );
}

In the above snippet, we imported the useDarkMode custom hook which returns the theme, the toggle functionallity and the componentMounted.

First, we confirm that the component has mounted using the useEffect lifecycle hook. If it hasn't, we render an empty div.
We add the toggleTheme functionality to the button, which toggles the theme onClick(light and dark mode),
then in the ThemeProvider, we dynamically render lightTheme or darkTheme based on the theme returned by the useDarkMode hook.

That is all! We can now easily toggle between the light mode and the darkmode. Below is the codesandbox for the full code.

helloWorld to Hello World

Temitope Ayodele — Mon, 14 Dec 2020 12:38:12 +0000

To convert camelCase string to Title Case (ES6)

const convertCamelToTitleCase = (camelCase) =>
  camelCase
    .replace(/([A-Z])/g, (match) => ` ${match}`)
    .replace(/^./, (match) => match.toUpperCase())


//Example: convertCamelToTitleCase('todayILearned')
//Result: Today I Learned

Faster loading webpages with webP images

Temitope Ayodele — Sat, 21 Nov 2020 20:18:03 +0000

Have you ever wondered why your website takes forever to load? It is probably because you are using too large images. The common image types are PNG, JPG, SVG, and GIF. It is time to embrace the modern image formats! Examples are:
JPEG 2000, JPEG XR and WebP. This article will focus on webP image formats.

WHAT IS WEBP?

WebP is a powerful image compression technology developed by Google in 2010. It focuses on using advanced optimization techniques to reduce file size and it supports transparency and even animation. WebP formats can help compress your images to become up to two-times smaller than JPG images, and this definitely makes the images load faster and hence leading to better website performance. Take a look at this image

This png image has a size of 482.1KB,
The jpeg format has a size of 55.4KB
When converted to webP, the size became 43KB and the quality was still maintained

HOW TO USE WEBP

Firstly, you have to convert your images to webP formats.
Any common file format can be converted to WebP and still maintain their original quality (lossless compression). There are several online image formatters available all over the internet (such as this and this ).
However, as awesome as this is, webP is not supported on all browsers. Checkout the support for webP here.
This is not a big issue as we can still use this format without breaking our images on unsupported browsers by using fallbacks!

Using webP with Fallbacks

HTML has two image media element (img and picture)
With the picture element you can to load zero to many source elements and one img element. How does this work? The browser will consider each of the image URL in the elements and pick the best match among them. If neither of them is supported by the browser, or if the browser does not even support the element at all, it then selects the image in the tag.

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg">
</picture>

If the browser does not support webP image formats, the JPG image is loaded.

To avoid the clumsiness, (as this seems like too many lines of code in my opinion, lol) you can create a component for this. Using ReactJS,

const ImageWithFallback = ({
  src,
  fallback,
  type = 'image/webp',
  ...delegated
}) => {
  return (
    <picture>
      <source srcSet={src} type={type} />
      <img src={fallback} {...delegated} />
    </picture>
  );
};

So, whenever you want to add an image in your code, you can easily import the ImageWithFallback component and use as an image tag. Keep your code tidy :)

<ImageWithFallback
  src="/images/my-image.webp"
  fallback="/images/my-image.png"
  alt="My beautiful portrait"
/>

In conclusion, your website speed is a very important factor, and using webP image formats can help you achieve faster loading images with equal good qualities.

Blur scrolling-div content behind an element using pure CSS

Temitope Ayodele — Thu, 19 Nov 2020 15:11:38 +0000

To blur the scrolling div content behind an element, the backdrop-filter css property is used. The div is assigned a backdrop-filter property and also given a slightly transparent background color (e.g rgba(255, 255, 255, 0.85))

HTML

<div class='wrapper'>
  <div class='box'>Whatever is behind this div is blurred out</div>
</div>

CSS

body {
  margin: 0;
}
.wrapper {
  max-width: 100vw;
  background-image: url(https://images.pexels.com/photos/5491161/pexels-photo-5491161.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  background-color: #cccccc; 
  height: 500px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.box {
  position: fixed;
  top: 30%;
  left: 40%;
  color: #333;
  font-weight: bolder;
  width: 20%;
  padding: 1rem;
  border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(4px);
    -o-backdrop-filter: blur(4px);
    -moz-backdrop-filter: blur(4px);

    backdrop-filter: blur(4px);
}

Valid Example

A sample usage of this is to blur the div scrolling behind the navbar in an application. See the sample code below

I hope this helps

Toggle Password Visibility

Temitope Ayodele — Wed, 14 Oct 2020 13:24:44 +0000

For input types of 'password', browsers mark the user's input (typically by replacing the characters with asterisk '*'or dot '.') for security reasons. However, the user might want to confirm that his input in plain text, so there is the need for an option to toggle the password visibility.

Step 1: Create the HTML input tag [type= 'password']

  <input type='password' id='password' />
  <p>
    Show Password
    <input type='checkbox' id='checkbox' />
  </p>

Step 2: Store selectors (Javascript)

const myInput = document.querySelector("#password");
const checkbox = document.querySelector("#checkbox");

Step 3: Toggle visibility function

This checks toggles the input tag (myInput) type between type password and type text

const toggleVisibility = () => {
  if (myInput.type === "password") {
    myInput.type = "text";
  } else {
    myInput.type = "password";
  }
};

Step 4: Assign this function to the checkbox onchange event

checkbox.addEventListener("change", toggleVisibility);

Checkout this codepen for the working code.

Quick set-up for ESLint

Temitope Ayodele — Wed, 30 Sep 2020 05:56:09 +0000

ESLint helps to format code and analyze it to make suggestions for improvement.
This is a quick guide to set it up on your VScode.

Step 1:
Install eslint globally

npm install -g eslint

Step 2:
Initialize an ESLint configuration by running

eslint --init

Step 3:
You will be prompted with a few different questions about your project to create the best configuration. Then you will also be asked to install extra packages; choose yes.
After that finishes, you should have a brand new .eslintrc file in your project

Web Accessibility- Building website for everyone

Temitope Ayodele — Fri, 18 Sep 2020 10:57:27 +0000

When building a website, it is important to consider the audience (users). There are different categories of people that have access to the internet and you have to ensure that they can use your website without any hindrance, and at the same time, get the full message your website passes and offers.

When we talk of different categories, we also have those with disabilities included.(no matter how little). There are different disabilities in this world, some of which include:

1. Physical disabilities - Users with difficulties moving specific parts of their body. It affects their mobility and dexterity. This can for instance affect how they use the mouse and keyboard, or if they can use it at all.

2. Visual impairment - Users with partial or total inability to see or to perceive color contrasts.

3. Intellectual disability - Users who have greater difficulty with mental tasks than the average person. They have reduced capacity to read, learn tasks or process information.

4. Hearing impairment - Users who have difficulties with hearing. It could be partial or total deafness.

As developers, we need to ensure that no one, no matter their physical or mental condition, should miss out on information your website is passing.

Now how do we make that happen? Web accessibility comes to the rescue.

Accessibility is being able to obtain and/or use. It is the quality of being easily understood and appreciated. Web accessibility is the practice that ensures that there are no barriers that prevent interaction with/access to websites by people with disabilities.

WEB ACCESSIBILITY TIPS

1. Website should be keyboard friendly.

The site should be easy to navigate through with just the keyboard, for situations when the mouse is not available. This is because many assistive technologies rely on keyboard-only navigation. You should be able to use all of your site’s major features with a keyboard and nothing else. Pages, links and content should be accessible with the keyboard only.

2. Use Alt texts on images.

For all images, ensure that you add an alt text which should give a perfect description of what the image is. The text acts as a replacement for the image if it fails to load. Also, the text is accessed by screen readers to “read” the picture. They are read aloud to blind users on a screen reader and other screen assistive technologies.

3. Don't use tables for anything except Tabular data.

This is because can be confusing to screen readers and similar devices.

4. Design your forms for Accessibility

Ensure you add to your form elements though they might not be visible. You can add labels for screen readers and still hide them from displaying to other users.

<form action="./contact.php" method="POST"> 
  <label for="fullname">Full name</label> 
  <input type="text" name="fullname" id="fullname" /> 
  <label for="email">Email address</label> 
  <input type="email" name="email" id="email" />  
  <label for="phone">Telephone</label> 
  <input type="number" name="phone" id="phone" />
</form>

5. Choose Your Colors Carefully

The most pressing issue is making sure text stands out against the background. Ideally, you should set a dark color against a light one, making sure that they don’t bleed into each other.

6. Use Headers to Structure Your Content Correctly

It will make your content easily understandable, and users will get the flow. You should only use one H1 per page – usually as the page title, then the h2 for subheaders and so on.

7. Avoid Automatic Media and Navigation

Avoid including elements that start without the user first prompting them. Do no autoplay video, music or othee music files.

8. Pay attention to relatively minor things.

For instance, let a link be a noticeable link, therefore, either use a different color, or underline. Also, fully write out acronyms, it helps in the reading.

9. Always Use the Title Tag

Browsers don’t always display the HTML title tag in the webpage body, but it is helpful for screen readers and tabs title. So ensure each of your website’s pages has a descriptive but short title that tells visitors what the page is all about.

10. Reduce your divs and make use of semantic elements

HTML5 provides additional elements, such as , section and , to better structure your content.

11. Always specify your web app language

<html lang="en-US"> // American english

<html lang="en-UK"> // British english

<html lang="fr"> // French

These are various web accessibility techniques we should start implementing in our applications, to ensure that everyone, no matter the disability, gets the full information your website is passing, and also ensure great users' experience

Regex for Passwords

Temitope Ayodele — Thu, 03 Sep 2020 10:02:49 +0000

Minimum eight characters, at least one letter and one number:

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

Minimum eight characters, at least one letter, one number and one special character:

"^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$"

Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"

Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"

Minimum eight and maximum 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$"