DEV Community: Lakh Bawa

6 Steps to Reduce Your Mobile Addiction

Lakh Bawa — Sat, 18 Apr 2026 16:59:53 +0000

This may not be entirely related to programming, but I believe it might be useful for you. So here we go...

Set up the Long Passcode and disable Face ID (adds friction)
Lock the Highly Accessible App with a passcode(adds friction)
[IOS] Set the Screen Time to 1 min on Most used apps
Uninstall the Problematic app if possible.
Turn off the notifications from non-useful apps (reduces distractions)
Organise the apps on a minimum number of screens

That's it, that's all I wanted to say! Thanks for reading!

Easy to follow Bash Scripting Cheatsheet

Lakh Bawa — Sat, 18 Apr 2026 16:55:05 +0000

Bash scripting is essential if you do any kind of server management such as setting up a Linux server, setting up deployment, etc. You can write bash scripts/shell scripts to automate common tasks. I created this bash scripting cheatsheet that can provide you with fundamental knowledge about bash scripting

Basic Script Structure

#!/bin/bash
# Shebang line - tells the system to use bash interpreter

# Script header
SCRIPT_NAME="example_script"
VERSION="1.0"
AUTHOR="Your Name"
DATE=$(date +"%Y-%m-%d")

Variables

# Variable Declaration
name="John Doe"
age=30

# Read-only Variables
readonly PI=3.14159

# Environment Variables
echo $HOME
echo $USER
echo $PATH

# Command Substitution
current_date=$(date)
files=$(ls)

# Default Values
var=${parameter:-default_value}  # Use default if parameter is unset or null
var=${parameter:=default_value}  # Assign default if parameter is unset or null

Input and Output

# User Input
read -p "Enter your name: " username
read -sp "Enter password: " password  # Silent input

# Standard Output
echo "Hello, World!"
printf "Formatted output: %s is %d years old\n" "$name" "$age"

# Error Output
echo "Error message" >&2

# Redirecting Output
command > output.txt        # Overwrite
command >> output.txt       # Append
command 2> error.log        # Redirect stderr
command &> all_output.log   # Redirect both stdout and stderr

Conditional Statements

# If-Else Statements
if [ condition ]; then
    # commands
elif [ another_condition ]; then
    # commands
else
    # commands
fi

# Comparison Operators
# Numeric Comparisons
[ $a -eq $b ]  # Equal
[ $a -ne $b ]  # Not Equal
[ $a -gt $b ]  # Greater Than
[ $a -lt $b ]  # Less Than
[ $a -ge $b ]  # Greater or Equal
[ $a -le $b ]  # Less or Equal

# String Comparisons
[ "$str1" = "$str2" ]   # Equal
[ "$str1" != "$str2" ]  # Not Equal
[ -z "$str" ]           # Zero length
[ -n "$str" ]           # Non-zero length

# File Condition Tests
[ -f file ]     # Regular file exists
[ -d directory ]# Directory exists
[ -r file ]     # File is readable
[ -w file ]     # File is writable
[ -x file ]     # File is executable
[ -e file ]     # File exists

Loops

# For Loop
for variable in {1..5}; do
    echo $variable
done

for file in *.txt; do
    echo "Processing $file"
done

# C-style For Loop
for (( i=0; i<5; i++ )); do
    echo $i
done

# While Loop
counter=0
while [ $counter -lt 5 ]; do
    echo $counter
    ((counter++))
done

# Until Loop
counter=0
until [ $counter -ge 5 ]; do
    echo $counter
    ((counter++))
done

# Break and Continue
while true; do
    # some condition
    break       # Exit loop
    continue    # Skip to next iteration
done

Functions

# Function Definition
function greet() {
    local name=$1
    echo "Hello, $name!"
}

# Alternative Syntax
greet() {
    echo "Hello, $1!"
}

# Function with Return Value
calculate_sum() {
    return $(($1 + $2))
}

# Calling Functions
greet "Alice"
calculate_sum 5 3
echo $?  # Prints the return value

Arrays

# Declaring Arrays
fruits=("Apple" "Banana" "Cherry")
numbers=(1 2 3 4 5)

# Access Array Elements
echo ${fruits[0]}
echo ${fruits[-1]}  # Last element

# All Array Elements
echo ${fruits[@]}
echo ${#fruits[@]}  # Array Length

# Modifying Arrays
fruits+=("Date")    # Append
unset fruits[1]     # Remove element

String Manipulation

# Substring Extraction
str="Hello, World!"
echo ${str:0:5}     # Substring from index 0, length 5
echo ${str:7}       # Substring from index 7 to end

# String Length
echo ${#str}

# String Replacement
text="Hello, World!"
echo ${text/World/Universe}  # Replace first occurrence
echo ${text//o/0}            # Replace all occurrences

# Case Conversion
echo ${str^^}       # Uppercase
echo ${str,,}       # Lowercase

Command-Line Arguments

# Accessing Arguments
echo $0         # Script name
echo $1         # First argument
echo $2         # Second argument
echo $#         # Number of arguments
echo $@         # All arguments

# Argument Processing
while [[ $# -gt 0 ]]; do
    case $1 in
        -h|--help)
            display_help
            shift
            ;;
        -v|--version)
            echo "Version 1.0"
            shift
            ;;
        *)
            echo "Unknown option: $1"
            shift
            ;;
    esac
done

Error Handling

# Exit Codes
exit 0    # Successful execution
exit 1    # Generic error

# Error Checking
command || { echo "Command failed"; exit 1; }

# Set Strict Mode
set -e  # Exit immediately on error
set -u  # Treat unset variables as error
set -o pipefail  # Fail on any command in a pipeline

File Handling

# File Existence
if [ -f "file.txt" ]; then
    echo "File exists"
fi

# Reading Files
while IFS= read -r line; do
    echo "$line"
done < file.txt

# Writing Files
echo "Content" > output.txt
echo "More content" >> output.txt

Arithmetic Operations

# Basic Arithmetic
a=10
b=20
c=$((a + b))
d=$((a * b))

# Arithmetic Expansion
((counter++))
((counter += 5))

# Bc for Complex Math
result=$(echo "scale=2; 10/3" | bc)

Miscellaneous Tips

# Debugging
bash -x script.sh  # Trace script execution
set -x            # Enable debugging
set +x            # Disable debugging

# Comments
# Single-line comment
: '
Multi-line
comment
block
'

# Sleep and Timing
sleep 5        # Wait 5 seconds
time command   # Measure execution time

Best Practices

Always quote variables: "$variable"
Use [[ for advanced string/regex testing
Prefer [[ ]] over [ ] for conditionals
Add error handling and input validation
Use meaningful variable and function names
Comment your code
Keep scripts modular and reusable

A Standardised Approach to HTML Attribute Ordering

Lakh Bawa — Mon, 03 Nov 2025 19:10:06 +0000

We've all been there. You open an HTML file and see this:

<button onclick="submit()" disabled type="submit" aria-label="Submit form" class="btn" id="submit-btn">
  Submit
</button>

Or maybe this:

<button type="submit" id="submit-btn" onclick="submit()" class="btn" aria-label="Submit form" disabled>
  Submit
</button>

Both are valid HTML. Both work perfectly. But which one is "correct"?

Repo: https://github.com/lakhbawa/HTML-Attribute-Ordering-Standard (Please star the repo to help others)

The Problem

HTML doesn't care about attribute order. Your browser doesn't care. But humans do. When every developer on your team orders attributes differently, your codebase becomes harder to read, review, and maintain.

Think about it: how much time have you wasted scanning through a long list of attributes to find the id? Or tracking down that event handler buried in the middle? These small moments add up.

Introducing HAOS

I've created the HTML Attribute Ordering Standard (HAOS) - a comprehensive, community-driven approach to organizing HTML attributes consistently.

The core principle is simple: attributes should be ordered by their purpose and importance.

The 11-Category System

HAOS organizes attributes into 11 categories:

Identification (id, class, name)
References (for, form, list)
Structural (type, href, src, alt)
Data (data-* attributes)
Accessibility (role, aria-*, tabindex)
Form-Specific (placeholder, required, disabled)
Media (width, height, controls)
Behavioral (draggable, contenteditable, loading)
Styling (style)
Event Handlers (onclick, onchange, etc.)
Custom (non-standard attributes)

Before and After

Before (chaos):

<input placeholder="Enter email" onclick="validate()" type="email" 
       required class="form-input" id="user-email" aria-label="Email address">

After (HAOS):

<input 
  id="user-email"
  class="form-input"
  type="email"
  aria-label="Email address"
  placeholder="Enter email"
  required
  onclick="validate()">

See the difference? The most important identifying information (id, class) comes first, followed by structural details, accessibility, form specifics, and finally event handlers.

Why This Matters

1. Faster Code Reviews

When attributes follow a predictable pattern, reviewers can focus on logic changes rather than hunting for specific attributes.

2. Reduced Cognitive Load

Your brain doesn't have to work as hard to parse HTML when attributes appear in expected locations.

3. Better Diffs

Consistent ordering makes Git diffs more meaningful. Attribute changes are easier to spot when everything else stays in place.

4. Easier Onboarding

New team members learn one pattern instead of adapting to each developer's personal style.

5. Automation-Friendly

Standardized ordering makes it easier to write linters, formatters, and other tooling.

Real-World Example

Here's a complex input field following HAOS:

<input 
  id="email-input"
  class="form-control"
  name="user_email"
  type="email"
  value="user@example.com"
  data-validation="email"
  aria-describedby="email-help"
  placeholder="Enter your email"
  required
  autofocus
  autocomplete="email"
  minlength="5"
  maxlength="100"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  oninput="validateEmail(this)">

Every attribute has its place. No guesswork needed.

Framework Support

HAOS includes specific guidance for modern frameworks:

React/JSX:

<input
  id="username"
  className="form-input"
  type="text"
  value={username}
  aria-label="Username"
  required
  onChange={handleChange}
/>

Vue.js:

<input
  id="username"
  class="form-input"
  type="text"
  :value="username"
  aria-label="Username"
  required
  @input="handleInput"
/>

Getting Started

The full standard is available on GitHub [link to your repo]. It includes:

Detailed rationale for each category
Dozens of real-world examples
Framework-specific guidelines
Implementation strategies
Tooling recommendations

Quick Adoption Tips

Start small: Apply HAOS to new code first
Use tooling: Set up ESLint or Prettier rules
Team buy-in: Share the standard with your team
Be consistent: Make it part of your code review checklist
Stay flexible: Adapt the standard to your team's needs

The Big Picture

HAOS isn't about being pedantic. It's about reducing friction in our daily work. It's about spending less time parsing HTML and more time building features.

Standards like this work because they remove tiny decisions from our day. Should id come before class? Don't think about it - just follow the pattern. Over thousands of elements across dozens of files, that mental energy adds up.

Join the Discussion

This is a community standard. It's meant to evolve based on real-world usage and feedback.

What do you think? Does your team have different conventions? Are there edge cases I missed? I'd love to hear your thoughts in the comments.

Let's bring some order to the beautiful chaos of HTML. 🎯

Repository: https://github.com/lakhbawa/HTML-Attribute-Ordering-Standard

Full Standard: https://github.com/lakhbawa/HTML-Attribute-Ordering-Standard/blob/main/README.md

Found this helpful? Give it a ❤️, Star the repo and share it with your team!

JavaScript Isn’t Broken—You Just Didn’t Know the Coercion Rules

Lakh Bawa — Mon, 15 Sep 2025 22:26:22 +0000

Ever stared at [] + {} and thought, “Wait… what did I just do?” You’re not alone. JavaScript’s type coercion has caused more facepalms, late-night Googling, and “why is this happening?!” moments than any other feature in the language. But here’s the secret: JS isn’t broken—it’s following its own set of perfectly logical rules. Once you understand them, you’ll stop cursing your code and start actually enjoying those “wait, how did that happen?” moments.

So, what is this mysterious “type coercion” in JavaScript? Simply put, it’s JavaScript automatically converting one type into another—like turning a number into a string when you do "Age: " + 25, or a boolean into a number when doing true + 1. It exists because JS was designed to be flexible and forgiving, especially in browsers where scripts needed to run without strict ordering or boilerplate conversions.

Other languages like Python, Java, or PHP don’t need it—they either execute code strictly top-to-bottom or have compilers that already know all the types. In JS, coercion is necesary to make everyday coding smoother, but without knowing the rules, it feels like magic… and sometimes chaos.

Understanding the Coercion Process

JavaScript performs implicit coercion through three main conversion types:

ToString: Converts values to strings
ToNumber: Converts values to numbers
ToBoolean: Converts values to booleans

The key insight is that different operators follow completely different coercion strategies. Let's explore each scenario.

1. Addition Operator (+): The String vs Number Decision

The addition operator has special behavior that differs from all other arithmetic operators.

Decision Flow:

Expression: A + B
    ↓
Is either operand a string?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Convert both         Convert both
to strings           to numbers
    ↓                    ↓
String              Numeric
concatenation       addition

Examples:

// String concatenation (either operand is string)
5 + "3"           // "53"
"Hello" + true    // "Hellotrue"
"" + {}          // "[object Object]"
null + "test"    // "nulltest"

// Numeric addition (no strings involved)
5 + 3            // 8
true + false     // 1 (true=1, false=0)
null + undefined // NaN (null=0, undefined=NaN)
[] + []          // "" (both arrays become empty strings)

Key Rule:

If ANY operand is a string, both operands are converted to strings and concatenated. Otherwise, both are converted to numbers and added.

2. Loose Equality (==): The Complex Cascade

Loose equality has the most complex coercion rules, following a specific hierarchy of checks.

Decision Flow:

Expression: A == B
    ↓
Same types?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Use === comparison   Special case: null == undefined?
                         ↓                    ↓
                        YES                  NO
                         ↓                    ↓
                    Return true         Number vs String?
                                            ↓                    ↓
                                           YES                  NO
                                            ↓                    ↓
                                    Convert string          Boolean involved?
                                    to number                    ↓                    ↓
                                            ↓                   YES                  NO
                                       Compare              Convert boolean          ↓
                                                           to number           Object vs Primitive?
                                                                ↓                    ↓
                                                           Retry comparison        YES
                                                                                    ↓
                                                                            Convert object
                                                                            to primitive
                                                                                    ↓
                                                                            Retry comparison

Examples:

// Same type - use strict equality
5 === 5              // true
"hello" === "hello"  // true

// Special case
null == undefined    // true (only case where these equal something)

// Number vs String
5 == "5"            // true (string "5" becomes number 5)
0 == ""             // true (empty string becomes 0)
0 == "0"            // true

// Boolean conversion
true == 1           // true (true becomes 1)
false == 0          // true (false becomes 0)
true == "1"         // true (true→1, "1"→1)

// Object conversion
[1] == 1            // true ([1].toString() is "1", then "1"→1)
[1,2] == "1,2"      // true ([1,2].toString() is "1,2")

Key Rule:

JavaScript tries multiple conversion strategies in a specific order until it can make the comparison.

3. Arithmetic Operators (-, , /, %, *): Always Numbers

Unlike addition, all other arithmetic operators have simple, consistent behavior.

Decision Flow:

Expression: A ○ B (where ○ is -, *, /, %, or **)
    ↓
Convert both operands to numbers
    ↓
Either operand is NaN?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Result is NaN       Perform numeric
                    operation

Examples:

// String to number conversion
"10" - "3"          // 7
"5" * "2"           // 10
"20" / "4"          // 5

// Boolean to number
true - false        // 1 (1 - 0)
true * 3            // 3 (1 * 3)

// Special values
null - 5            // -5 (null becomes 0)
undefined * 2       // NaN (undefined becomes NaN)
"abc" / 2           // NaN (invalid number conversion)

Key Rule:

All arithmetic operators (except +) always convert both operands to numbers first.

4. Relational Operators (<, >, <=, >=): Context Matters

Relational operators have different behavior depending on the operand types.

Decision Flow:

Expression: A < B
    ↓
Both operands are strings?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Lexicographic        Convert both
comparison           to numbers
    ↓                    ↓
String order         Numeric
comparison           comparison

Examples:

// String comparison (lexicographic order)
"apple" < "banana"   // true
"10" < "9"          // true! (character '1' < '9')
"10" < "2"          // true! (character '1' < '2')

// Numeric comparison (when not both strings)
"10" < 9            // false (10 < 9 is false)
10 < "9"            // false (10 < 9 is false)
true < 2            // true (1 < 2)

Key Rule:

If both operands are strings, compare them alphabetically. Otherwise, convert both to numbers and compare numerically.

5. Logical Operators (&&, ||): Truthiness with Original Values

Logical operators evaluate truthiness but return original values, not booleans.

Decision Flow:

Expression: A && B
    ↓
Convert A to boolean (but keep original A)
    ↓
A is truthy?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Return B             Return A
(original value)     (original value)

Expression: A || B
    ↓
Convert A to boolean (but keep original A)  
    ↓
A is truthy?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Return A             Return B
(original value)     (original value)

The 7 Falsy Values:

false, 0, -0, 0n, "", null, undefined, NaN

Everything else is truthy, including:

[], {}, "0", "false", function(){}, -1, Infinity

Examples:

// && operator
"hello" && "world"   // "world" (both truthy, return second)
0 && "world"        // 0 (first falsy, return first)
"" && false         // "" (first falsy, return first)

// || operator  
"hello" || "world"   // "hello" (first truthy, return first)
0 || "world"        // "world" (first falsy, return second)
"" || "default"     // "default" (first falsy, return second)

// Common pattern - default values
const name = user.name || "Anonymous";

Key Rule:

Logical operators evaluate truthiness for control flow but always return one of the original operand values.

6. Object to Primitive Conversion: The Detailed Process

When JavaScript needs to convert an object to a primitive value, it follows a specific algorithm.

Decision Flow:

Object needs primitive conversion
    ↓
Has Symbol.toPrimitive method?
    ↓                    ↓
   YES                  NO
    ↓                    ↓
Call Symbol.         Hint is "string"?
toPrimitive              ↓                    ↓
    ↓                   YES                  NO
Return result            ↓                    ↓
                    Try toString()       Try valueOf()
                    then valueOf()       then toString()
                         ↓                    ↓
                    Return first         Return first
                    successful result    successful result

Conversion Examples:

// Array conversion
[] + ""             // "" (Array.toString() returns "")
[1] + ""           // "1" (single element)
[1,2,3] + ""       // "1,2,3" (join with commas)

// Object conversion  
({}) + ""          // "[object Object]" (Object.toString())
new Date() + ""    // "Wed Oct 25 2023..." (Date.toString())

// Custom conversion
const obj = {
  valueOf() { return 42; },
  toString() { return "hello"; }
};

Number(obj)        // 42 (valueOf first for number hint)
String(obj)        // "hello" (toString first for string hint)
obj + ""           // "42" (number hint, valueOf)

Key Rule:

Objects are converted using valueOf() and toString() methods, with the order depending on the expected result type.

7. The ! (NOT) Operator: Simple Boolean Conversion

The NOT operator is straightforward - it converts to boolean and negates.

Decision Flow:

Expression: !A
    ↓
Convert A to boolean
    ↓
Negate the result

Examples:

!true              // false
!false             // true
!0                 // true (0 is falsy)
!"hello"           // false ("hello" is truthy)
!""                // true ("" is falsy)
![]                // false ([] is truthy)

// Double negation for explicit boolean conversion
!!0                // false
!!"hello"          // true
!![]               // true

Practical Tips for Avoiding Coercion Confusion

1. Use Strict Equality

// Avoid
if (x == 0) { }

// Prefer  
if (x === 0) { }

2. Be Explicit with Conversions

// Avoid implicit coercion
const result = userInput + "";

// Be explicit
const result = String(userInput);

3. Watch Out for Addition

// Dangerous
const total = price + tax;  // Could concatenate if either is string

// Safer
const total = Number(price) + Number(tax);

4. Use Template Literals for String Building

// Avoid
const message = "Hello " + name + "!";

// Prefer
const message = `Hello ${name}!`;

Common Gotchas and Their Explanations

// Why does this happen?
[] + []            // "" (both arrays become empty strings)
[] + {}            // "[object Object]" (array becomes "", object becomes "[object Object]")
{} + []            // 0 (in some contexts, {} is a block, +[] becomes 0)
true + true        // 2 (true becomes 1, 1 + 1 = 2)
"2" > "12"         // true (string comparison: "2" > "1")
null >= 0          // true (null becomes 0, 0 >= 0)
null == 0          // false (special rule: null only equals undefined)

Each of these results from following the decision trees outlined above. Once you understand the rules, JavaScript's behavior becomes predictable rather than mysterious.

Conclusion

JavaScript's implicit coercion follows consistent, logical rules - but different operators use completely different strategies. The key to mastering coercion is understanding that:

Addition (+) prioritizes strings over numbers
Equality (==) follows a complex cascade of type checks
Arithmetic (-,*,/,%) always converts to numbers
Relational (<,>) depends on whether both operands are strings
Logical (&&,||) evaluates truthiness but returns original values
Objects convert via valueOf/toString methods
NOT (!) simply converts to boolean and negates

By following these decision trees, you can predict exactly what JavaScript will do in any coercion scenario, transforming semingly "weird" behavior into predictable, understandable code execution.

Please leave a like if you enjoyed the article, Thank you

Easy to follow Regular Expression Cheatsheet

Lakh Bawa — Sun, 08 Dec 2024 13:26:51 +0000

Hi Everyone, We know regular expressions can be tricky to read and write. I prepared this Regular expression cheatsheet with the help of various resources. I hope this helps.

Basic Matching

Character	Meaning	Example	Matches
`.`	Any single character	`h.t`	"hat", "hot", "hit"
`*`	0 or more of previous character	`go*gle`	"ggle", "google", "gooogle"
`+`	1 or more of previous character	`go+gle`	"google", "gooogle"
`?`	0 or 1 of previous character	`colou?r`	"color", "colour"
`^`	Start of line	`^Hello`	"Hello world" (not "say Hello")
`$`	End of line	`world$`	"Hello world" (not "worldly")

Character Classes

Syntax	Meaning	Example	Matches
`[abc]`	Any single character in set	`[aeiou]`	Any vowel
`[^abc]`	Any single character NOT in set	`[^0-9]`	Any non-digit
`[a-z]`	Range of characters	`[0-9]`	Any single digit

Predefined Character Classes

Shorthand	Equivalent	Meaning
`\d`	`[0-9]`	Digit
`\D`	`[^0-9]`	Non-digit
`\w`	`[a-zA-Z0-9_]`	Word character
`\W`	`[^\w]`	Non-word character
`\s`	`[ \t\n\r\f\v]`	Whitespace
`\S`	`[^\s]`	Non-whitespace

Quantifiers

Syntax	Meaning	Example	Matches
`{n}`	Exactly n times	`a{3}`	"aaa"
`{n,}`	n or more times	`a{2,}`	"aa", "aaa", "aaaa"
`{n,m}`	Between n and m times	`a{2,4}`	"aa", "aaa", "aaaa"

Grouping & Capturing

Syntax	Meaning	Example	Matches
`(...)`	Capture group	`(ab)+`	"ab", "abab", "ababab"
`(?:...)`	Non-capturing group	`(?:ab)+`	Same as above
`\1`, `\2`	Backreference	`(.)\1`	"aa", "bb", "11"

Anchors & Boundaries

Syntax	Meaning	Example	Matches
`\b`	Word boundary	`\bcat\b`	"cat" (not "category")
`\B`	Non-word boundary	`\Bcat\B`	"category"

Advanced Assertions

Syntax	Meaning	Example	Matches
`(?=...)`	Positive lookahead	`\d(?=px)`	"5" in "5px"
`(?!...)`	Negative lookahead	`\d(?!px)`	"5" in "5em"
`(?<=...)`	Positive lookbehind	`(?<=\$)\d+`	"42" in "$42"
`(?<!...)`	Negative lookbehind	`(?<!\$)\d+`	"42" in "USD 42"

Common Use Case Patterns

Pattern	Description	Matches
`^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Z	a-z]{2,}$`	Email
`^\d{3}-\d{3}-\d{4}$`	US Phone Number	"123-456-7890"
`^(?=.[A-Za-z])(?=.\d)[A-Za-z\d]{8,}$`	Strong Password	Alphanumeric, 8+ chars

Regex Flags

Flag	Meaning	Example
`i`	Case-insensitive	`/pattern/i`
`g`	Global match	`/pattern/g`
`m`	Multiline mode	`/pattern/m`
`s`	Dot matches newline	`/pattern/s`

Performance Tips

Use non-capturing groups (?:...) when possible
Avoid backtracking
Use character classes instead of OR |
Be specific with quantifiers

Regex Test Tools

regex101.com
regexr.com
debuggex.com

Language Support

JavaScript: /pattern/flags
Python: re module
PHP: preg_ functions
Java: Pattern class
Ruby: // literals

Common Gotchas

. doesn't match newline
* and + are greedy
Escape special chars with \
Different syntax in different languages

Escape Special Characters

\ ^ $ . | ? * + ( ) [ ] { }

Pro Tip: Always test your regex with various inputs!

Please leave a like if you found this helpful. Thanks

Using Classes Instead of Associative Arrays for Better Type Safety in PHP Functions

Lakh Bawa — Fri, 31 Mar 2023 18:52:28 +0000

Introduction:

In PHP, associative arrays have long been used as a convenient way to store and return data from functions. However, in modern PHP development, using classes instead of associative arrays can greatly improve type safety and code maintainability. In this blog post, we will explore how to use classes for better type safety when returning results from functions, including example code to illustrate the concept.

Why Use Classes Over Associative Arrays?

There are several reasons why classes are superior to associative arrays for returning complex data from functions:

Memory efficiency: Classes are more memory-efficient than associative arrays.
Self-documentation: Classes allow for upfront property definitions, making them more self-explanatory.
IDE support: Auto-completion and code navigation are easier with classes.
Access control: Classes allow for restricting access to properties using protected or private modifiers.
Expandability: Adding new behavior to a class is as simple as adding new methods.
Example: Converting an Associative Array to a Class

Consider the following function, which returns an associative array containing information about a user:

function getUserData($id) {
    // Assume we fetch user data from a database
    $userData = [
        'id' => $id,
        'name' => 'John Doe',
        'email' => 'john.doe@example.com',
    ];

    return $userData;
}

To improve type safety, we can create a User class and modify the function to return an instance of that class:

class User {
    public $id;
    public $name;
    public $email;

    public function __construct($id, $name, $email) {
        $this->id = $id;
        $this->name = $name;
        $this->email = $email;
    }
}

function getUserData($id) {
    // Assume we fetch user data from a database
    $user = new User(
        $id,
        'John Doe',
        'john.doe@example.com'
    );

    return $user;
}

By using a class, we have improved type safety and made the code more maintainable. Additionally, we can now type hint the function's return value to indicate that it will return a User object:

function getUserData($id): User {
    // Same implementation as before
}

Example: Using a Class for a Collection of Objects

Now let's consider a function that returns an array of users:

function getAllUsers() {
    // Assume we fetch user data from a database
    $usersData = [
        ['id' => 1, 'name' => 'John Doe', 'email' => 'john.doe@example.com'],
        ['id' => 2, 'name' => 'Jane Smith', 'email' => 'jane.smith@example.com'],
    ];

    return $usersData;
}

We can create a UserCollection class to store the users and return an instance of that class:

class UserCollection implements IteratorAggregate {
    private $users;

    public function __construct($users = []) {
        $this->users = $users;
    }

    public function add(User $user) {
        $this->users[] = $user;
    }

    public function getIterator() {
        return new ArrayIterator($this->users);
    }
}

function getAllUsers(): UserCollection {
    // Assume we fetch user data from a database
    $userCollection = new UserCollection();
    $userCollection->add(new User(1, 'John Doe', 'john.doe@example.com'));
    $userCollection->add(new User(2, 'Jane Smith', 'jane.smith@example.com'));
}

Now, our getAllUsers() function returns a UserCollection object containing User objects, which is more type-safe and provides better code organization.

Using the Classes in Practice:

With the classes defined above, we can now use them in our code as follows:

// Fetch a single user
$user = getUserData(1);
echo "User ID: {$user->id}, Name: {$user->name}, Email: {$user->email}" . PHP_EOL;

// Fetch all users
$allUsers = getAllUsers();
foreach ($allUsers as $user) {
    echo "User ID: {$user->id}, Name: {$user->name}, Email: {$user->email}" . PHP_EOL;
}

When to Use Associative Arrays:

Configuration Settings:

Associative arrays excel at storing configuration data. They allow us to define key-value pairs without the need for a class structure. Here's an example:

$config = [
    'database_host' => 'localhost',
    'database_user' => 'root',
    'database_password' => '123456',
    'database_name' => 'my_database',
];

Using associative arrays for configuration settings simplifies the process of modifying or extending the settings without the overhead of defining a class.

Temporary Data Storage

:
When dealing with temporary data that doesn't require complex behavior or long-term storage, associative arrays offer a lightweight solution. They allow us to quickly store and access data without the need for a class structure. For instance:

$user = [
    'id' => 1,
    'name' => 'John Doe',
    'email' => 'john.doe@example.com',
];

Associative arrays are ideal for scenarios where we only need to pass data temporarily or perform simple manipulations.

Data Manipulation:

Associative arrays provide flexibility for data manipulation tasks. With built-in array functions, we can perform operations such as filtering, sorting, and mapping without the need for a class structure. Here's an example of filtering based on a specific condition:

$numbers = [2, 5, 8, 12, 6];
$evenNumbers = array_filter($numbers, function ($value) {
    return $value % 2 === 0;
});

This simplicity and convenience make associative arrays well-suited for small-scale data transformations or one-time operations.

Dynamic Data Structures:

Associative arrays adapt well to dynamic data structures that may change frequently. When dealing with data from external sources or user inputs with varying structures, associative arrays can accommodate these changes easily. Here's an example of dynamic data retrieval:

$data = getDataFromExternalSource();
$formattedData = [];

foreach ($data as $item) {
    $formattedData[] = [
        'id' => $item['id'],
        'name' => $item['name'],
        'email' => $item['email'],
    ];
}

`
Associative arrays provide the flexibility to handle dynamic data without the need to define class properties for every possible variation.

Conclusion:

By using classes instead of associative arrays when returning results from functions, we can improve type safety, code maintainability, and overall code quality in PHP. While it may require a bit more upfront work to define classes and their properties, the long-term benefits far outweigh the initial effort. Embracing this practice will lead to cleaner, more maintainable code, and a better overall development experience.

What is Null Safety Operator in PHP 8 and why is it next big thing in PHP

Lakh Bawa — Wed, 26 May 2021 02:40:44 +0000

PHP is known to have a very bad reputation among developers because of its loose type system and weak technical design.
However with every new version, PHP is changing the perception of developers.
Recent improvements in PHP 7 and then PHP 8 brought many features that you would only see in languages like Java, C++, Dart etc.

One of those features/improvement brought by PHP 8 is easier Null Safety.

Null Safety has lot of significance in programming, as Program Crashes caused by Null Values are highly popular.

What is Null Safety Operator:

Null-safe operator is a new syntax in PHP 8.0, that provides optional chaining feature to PHP.

The null-safe operator allows reading the value of property and method return value chaining, where the null-safe operator short-circuits the retrieval if the value is null, without causing any errors.

The syntax is similar to the property/method access operator (->), and following the nullable type pattern, the null-safe operator is ?->.

$foo?->bar?->baz;

Null safe operator silently returns null if the expression to the left side evaluates to null.

class Customer {
    public function getAddress(): ?Address {}
}
class Address {
    public function getCountry(): string {}
}


$country = $customer->getAddress()->getCountry();

In the snippet above, the Customer::getAddress() method return value is nullable; It can return a null value, or an object of Address class.

The $customer->getAddress()->getCountry() chain is not "null safe", because the return value of getAddress can be null, and PHP throws an error when it tries to call getCountry() method:

Fatal error: Uncaught Error: Call to a member function getCountry() on null in ...:...

To safely access the address, it was necessary to check the null return values before further accessing the return value.

$address = $customer->getAddress();
$country = $address ? $address->getCountry() : null;
$address = $customer->getAddress();
if ($address) {
    $country = $address->getCountry();
}
else {
    $country = null;
}

The null-safe operator solves this by short-circuiting the property/method access, and returning null immediately if the left side of the operator is null, without executing the rest of the expression.

References:

PHP 8 new Features.

Succeed in IELTS by Practicing English Speaking

How to transfer data from your Existing Server to Aws S3

Lakh Bawa — Fri, 14 May 2021 03:34:56 +0000

Amazon S3 is a pretty good and inexpensive choice for website data storage. You can save a lot of money uploading website data such as user uploads to S3 instead of your hosting server.

I found it a little difficult to understand how s3 migration works and did not find any simple tutorial on that. So here I am sharing the steps that can help you to migrate data to the S3 bucket.

Steps:

Install Aws Cli on your existing Server

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

Reference: https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-linux.html

Go to the IAM section in your AWS console and create a user will full administration access. Note down the Access Key Id and Access key secret provided to you after creating the user account.
Configure the Aws Cli on your Server using

aws configure

command, and provide Access Key Id and secret that you created before.

run aws s3 list to see the list of s3 buckets created inside your account( create one if you haven't done so).
Run the following command to copy the files to s3 bucket

aws s3 cp directory-to-be-uploaded s3://bucket-name-here --recursive

Thanks for reading.

What things to consider while adding new Software to your toolkit

Lakh Bawa — Fri, 02 Apr 2021 05:05:23 +0000

Here are few things that I like to consider while adding the new tool/software to my toolkit.

1. Easy to Use

It should be your number one priority.

If it is not easy to use, It will never get used.

So DO NOT look for Software that has too many features, You are most likely to stop using it after some time. We humans don't like complex stuff.

2. Simplicity

More steps it requires to do a job, More difficult it is, and more likely you going to hate it. So look for Softwares that requires minimum effort.

3. It Offers you just enough features, for your Requirements

Do not fall for Feature-Rich Software, You are going to stop using it, More options we are given, the more confused we get.

Good Software allows you to disable the extra features that are not useful for you. One of the good examples of that Software is Clickup, They allow you to disable the feature that you don't need.

What are your thoughts on it? Let me know in the comments section

What is Code Designing Technique and how to use it

Lakh Bawa — Sun, 28 Mar 2021 05:54:45 +0000

Hello everyone, hope you are doing well and staying safe.

Today, I would like to talk about something that I feel can be a great technique for programmers but we are rarely told about it in any tutorial, so there are very low chances, it becomes a part of our workflow. This technique is inspired by the Rubber duck Debugging technique.

Designing the Code:

Writing at least minimal steps required to solve a problem or developing a feature before starting to write the program, is Designing the code in my observation.

By Code design, I don't mean Pseudo Code.

Imagine, we start coding a website with CSS/HTML without making the design in a Design tool like Figma/XD/Sketch. You would agree, we are most likely to come up with a poor quality design after all the coding, also, we are going to take pretty long to do it. That is because we have to think about multiple things while designing the website that way.

The same can be applied in Problem Solving/Feature Development (usually backend development). If we can write/design at least minimal steps required to develop the feature, it helps a lot.

Here are few benefits of Designing the code.

It keeps us on track
It helps us to split the problem into multiple pieces, so while coding, we focus on the task at hand only
It helps us to think very clearly.
It is super helpful in debugging, you are going to spend 1/3rd time debugging if you apply this technique.

Code design in Feature Development

Let's say, we need to create a program that can calculate the numbers.

Goal: 
We need to write a program that can multiply the two numbers, Add them, subtract them.

Steps:
* Create multiply method
* Create subtract method
* Create add method

Just writing these few lines will help you a lot.

Code design in Debugging

Recently, I was having a hard time fixing an issue in my code, As soon as I explained the issue in writing, It was super clear to me, like what I need, what I need to do, etc. Just writing it helped me, solving the issue within 30 mins, that I was struggling with for 20 hours at least.

Goal:
* We want to update the URL as soon as someone goes to the next page on the pagination
* When a user clicks on the back button, he should be redirected to the previous page from pagination instead of the entirely different web Page.

Steps:
* When a user clicks on Next Page
* Change the URL and reload the page

All we are doing here is explaining things to us.

If you cannot explain it simply, you don't understand it well enough - Albert Einstein

I know, it looks like a super simple trick and not very useful, but I would highly suggest you try it for at least 1 week and compare the results.

Suggested Tools for this Technique: SimpleNote, Drafts(Mac only)

How to Setup Jest Testing In Nuxt Js Project

Lakh Bawa — Tue, 29 Dec 2020 09:18:34 +0000

Hello everyone, hope you are doing well and staying safe.

Recently I had to do a lot of work hard to figure out, how to set up the testing environment in Nuxtjs Project. As Nuxtjs does not provide a sufficient built In configuration for the testing environment ( even if you use nuxt CLI to bootstrap the project ). That's why just after finishing up the setup with continue troubleshoot of more than 20 hours. I am going to share my setup in this article which i used for our website acting jobs in india. We will assume you have set up the nuxt project using nuxt CLI. if not you can copy and match the package.json from the given Github repo.

Update: Code Refactored in Github Repository to Reduce Duplicating

Github Repo Link

Modify and edit the jest.config.js as below

module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js',
  },
  moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest',
  },
  collectCoverage: true,
  collectCoverageFrom: [
    '<rootDir>/components/**/*.vue',
    '<rootDir>/pages/**/*.vue',
  ],
}

Create the jest.setup.js file and paste the following content into it

import Vue from 'vue'
// import Vuetify from 'vuetify'
import { config } from '@vue/test-utils'

Vue.config.silent = true

// Vue.config.ignoredElements = ['nuxt-link']
// Mock Nuxt components
config.stubs.nuxt = { template: '<div />' }
config.stubs['nuxt-link'] = { template: '<a><slot /></a>' }
config.stubs['no-ssr'] = { template: '<span><slot /></span>' }

Our Jest Setup is done,

Now we are going to write the sample tests

Create tests/nuxt-pages.test.js file with the following content


const { Nuxt, Builder } = require('nuxt')
// eslint-disable-next-line no-unused-vars
const request = require('supertest')
const nuxtConfig = require('../nuxt.config.js')
// We keep the nuxt and server instance
// So we can close them at the end of the test
let nuxt = null

// Init Nuxt.js and create a server listening on localhost:4000
beforeAll(async () => {
  // const config = {
  //   dev: process.env.NODE_ENV === 'production',
  //   rootDir: resolve(__dirname, '../'),
  //   mode: 'universal',
  //   plugins,
  //   modules
  // }

  nuxt = new Nuxt({...nuxtConfig, server: { port: 3001}, buildDir: '.nuxt-build-jest'})

  await new Builder(nuxt).build()

  await nuxt.server.listen(3001, 'localhost')
}, 300000)

// Example of testing only generated html
describe('GET /', () => {
  test('Route / exits and render HTML', async () => {
    const { html } = await nuxt.server.renderRoute('/', {})

    expect(html).toContain('Vuetify')
  })
})

// describe('GET /', () => {
//   test('returns status code 200', async () => {
//     const response = await request(nuxt.server.app).get('/')
//     expect(response.statusCode).toBe(200)
//   })
// })

// describe('GET /test', () => {
//   test('returns status code 404', async () => {
//     const response = await request(nuxt.server.app).get('/test')
//     expect(response.statusCode).toBe(404)
//   })
// })

// Close server and ask nuxt to stop listening to file changes
afterAll(() => {
  nuxt.close()
})

We are testing the Server rendered pages here. for instance, we are checking if index pages contain "Vuetify" text after rendering

Testing the Components

create ./tests/vue-components.test.js

// import { shallowMount } from '@vue/test-utils'
import Logo from '@/components/Logo.vue'
import VuetifyLogo from '@/components/VuetifyLogo'
import GlobalModuleUsage from '@/components/GlobalModuleUsage'

import helpers from '~/utils/GeneralHelpers'

export const addVuetify = (context) => {
  context.vuetify = require('vuetify')
  context.vue.use(context.vuetify)
  // eslint-disable-next-line new-cap
  context.vuetifyInstance = new context.vuetify()
}

export const addVuex = (context) => {
  context.vuex = require('vuex')
  context.vue.use(context.vuex)
}

export const addHelpers = () => {
  return (context) => {
    context.vue.prototype.$helpers = helpers
  }
}

export const addI18n = (options) => {
  return (context) => {
    context.i18n = require('vue-i18n')
    context.vue.use(context.i18n)
    // eslint-disable-next-line new-cap
    context.i18nInstance = new context.i18n(options)
  }
}

export const addFilter = (name, lambda) => {
  return context => context.vue.filter(name, lambda)
}

export const compositeConfiguration = (...configs) => {
  return context => configs.forEach(config => config(context))
}

export const bootstrapVueContext = (configureContext) => {
  const context = {}
  const teardownVueContext = () => {
    jest.unmock('vue')
    Object.keys(context).forEach(key => delete context[key])
    jest.resetModules()
  }

  jest.isolateModules(() => {
    context.vueTestUtils = require('@vue/test-utils')
    context.vue = context.vueTestUtils.createLocalVue()

    jest.doMock('vue', () => context.vue)

    configureContext && configureContext(context)
  })

  return {
    teardownVueContext,
    ...context
  }
}

// describe('Logo', () => {
//   test('is a Vue instance', () => {
//     const wrapper = shallowMount(Logo)
//     expect(wrapper.vm).toBeTruthy()
//   })
// })

describe('Logo', () => {
  let vueContext = null

  beforeEach(() => {
    vueContext = bootstrapVueContext(
      compositeConfiguration(addVuex, addVuetify, addHelpers())
    )
  })

  afterEach(() => {
    vueContext.teardownVueContext()
  })

  test('Test Logo Component', () => {
    const wrapper = vueContext.vueTestUtils.shallowMount(Logo, {
      localVue: vueContext.vue,
      vuetify: vueContext.vuetifyInstance
    })

    expect(wrapper.text()).toMatch('Logo')
  })

  test('Test Vuetify Logo Component', () => {
    const wrapper = vueContext.vueTestUtils.shallowMount(VuetifyLogo, {
      localVue: vueContext.vue,
      vuetify: vueContext.vuetifyInstance
    })

    expect(wrapper.text()).toMatch('Logo')
  })

  test('Test Global Variables', () => {
    const wrapper = vueContext.vueTestUtils.shallowMount(GlobalModuleUsage, {
      localVue: vueContext.vue,
      vuetify: vueContext.vuetifyInstance
    })

    expect(wrapper.text()).toMatch('91')
  })
})

Update: Code Refactored in Repository to Reduce Code Duplicating

Github Repository with all the tests and configuration

Github Repo Link

Important Links:
https://medium.com/@brandonaaskov/how-to-test-nuxt-stores-with-jest-9a5d55d54b28
https://itnext.io/testing-real-world-vuejs-apps-d3e44118f8ce

Editing Images Before Uploading in Vue JS Project

Lakh Bawa — Sat, 26 Dec 2020 14:30:23 +0000

Hello Everyone, hope you are doing well and staying safe,

Today I will be sharing the small coding snippet that I created today to allow the users to edit/crop/rotate images before uploading them to the website.

I am using Vuetify with Material Icons in my project and assume many of you use that as well as it is the one that's most popular.

The most interesting point in this tutorial is, Edited image will be simply HTML File Object, unlike other solutions available out there on the internet which returns bash string or blob, etc, where you have to modify your backend logic.

so in our case, it would be fully compatible with the existing backend API uploading logic as it returns Default File Object.

First Install the dependency required to edit the image.

Installation

npm install --save vue-cropperjs

Secondly, create a component named AvatarUpload in the components folder or somewhere else where you feel comfortable.

In my case, its located at /components/Utils/AvatarUpload in my nuxtjs based project


<template>
  <div>
    <div class="content">
      <v-dialog v-model="isAvatarUploadDialogOpen" persistent max-width="600">
        <v-card>
          <v-card-title class="headline"></v-card-title>

          <v-card-text>
            <v-row no-gutters>
              <v-col class="">
                <section class="cropper-area">
                  <div class="img-cropper">
                    <vue-cropper
                      ref="cropper"
                      :initial-aspect-ratio="1"
                      :src="imgSrc"
                      preview=".preview"
                    />
                  </div>
                  <div class="actions mt-2">
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="zoom(0.2)">
                      <v-icon> mdi-magnify-plus-outline</v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="zoom(-0.2)">
                      <v-icon> mdi-magnify-minus-outline</v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="rotate(90)">
                      <v-icon href="#">
                        mdi-axis-x-rotate-clockwise
                      </v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="rotate(-90)">
                      <v-icon>
                        mdi-axis-x-rotate-counterclockwise
                      </v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="move(10, 0)">
                      <v-icon>
                        mdi-arrow-left
                      </v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="move(-10, 0)">
                      <v-icon>
                        mdi-arrow-right
                      </v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="move(0, 10)">
                      <v-icon>
                        mdi-arrow-up
                      </v-icon>
                    </v-btn>
                    <v-btn class="ma-1" small dark color="grey darken-3" @click.prevent="move(0, -10)">
                      <v-icon>
                        mdi-arrow-down
                      </v-icon>
                    </v-btn>


                    <!--              <v-btn class="ma-1" small dark color="grey darken-3"  @click.prevent="cropImage">-->
                    <!--                <v-icon > mdi-crop</v-icon>-->
                    <!--              </v-btn>-->
                    <v-btn class="ma-1" small dark color="grey darken-3">
                      <v-icon @click.prevent="reset"> mdi-lock-reset</v-icon>
                    </v-btn>
                  </div>
                </section>
                <div class="text-right">
                  <v-btn small dark color="grey darken-3 mt-3" @click.prevent="submitImage">
                    <v-icon> mdi-send</v-icon>
                    Submit
                  </v-btn>
                </div>


                <!--            <div class="mt-4">-->
                <!--              <v-btn small dark color="grey darken-3" @click.prevent="showFileChooser">-->
                <!--                <v-icon>-->
                <!--                  mdi-upload-->
                <!--                </v-icon>-->
                <!--                Upload Image-->
                <!--              </v-btn>-->
                <!--            </div>-->

                <!-- <textarea v-model="data" /> -->

              </v-col>

              <!--        <v-col cols="12" sm="6">-->
              <!--          <section class="preview-area">-->
              <!--            &lt;!&ndash;            <p>Preview</p>&ndash;&gt;-->
              <!--            <div class="preview"/>-->
              <!--            <div class="cropped-image">-->
              <!--              <img v-if="cropImg" :src="cropImg" alt="Cropped Image"/>-->
              <!--              <div v-else class="crop-placeholder"/>-->
              <!--            </div>-->
              <!--          </section>-->
              <!--        </v-col>-->
            </v-row>

          </v-card-text>
        </v-card>
      </v-dialog>

    </div>
  </div>
</template>

<script>
import VueCropper from "vue-cropperjs";
import "cropperjs/dist/cropper.css";

export default {
  components: {
    VueCropper,
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types
    image: {
      required: true
    },

  },
  data() {
    return {
      imgSrc: "/assets/images/berserk.jpg",
      cropImg: "",
      data: null,
      filename: "",
      mimeType: "",
      isAvatarUploadDialogOpen: false,
    };
  },
  watch: {
    image(value) {
      this.initialImageSetUp(value)
    }
  },
  mounted() {
    this.initialImageSetUp(this.image)
  },
  methods: {
    initialImageSetUp(value) {
      const self = this

      if (!value) {
        this.cropImg = ""
        this.$emit('close', true)
        return;
      }
      this.isAvatarUploadDialogOpen = true
      self.filename = value.name
      self.mimeType = value.type
      self.setImage(value)
    },
async dataURLToFile(imageString, filename, mimeType) {

    const res = await fetch(imageString);
    const blob = await res.blob();
    return new File([blob], filename, { type: mimeType });
  },
    async submitImage() {
      await this.cropImage();
      const imageFileResponse = await this.dataURLToFile(this.cropImg, this.filename, this.mimeType)
      this.$emit('done', imageFileResponse)
      this.isAvatarUploadDialogOpen = false

    },
    cropImage() {
      // get image data for post processing, e.g. upload or setting image src
      this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
    },
    // flipX() {
    //   const dom = this.$refs.flipX;
    //   let scale = dom.getAttribute("data-scale");
    //   scale = scale ? -scale : -1;
    //   this.$refs.cropper.scaleX(scale);
    //   dom.setAttribute("data-scale", scale);
    // },
    // flipY() {
    //   const dom = this.$refs.flipY;
    //   let scale = dom.getAttribute("data-scale");
    //   scale = scale ? -scale : -1;
    //   this.$refs.cropper.scaleY(scale);
    //   dom.setAttribute("data-scale", scale);
    // },
    getCropBoxData() {
      this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4);
    },
    getData() {
      this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4);
    },
    move(offsetX, offsetY) {
      this.$refs.cropper.move(offsetX, offsetY);
    },
    reset() {
      this.$refs.cropper.reset();
    },
    rotate(deg) {
      this.$refs.cropper.rotate(deg);
    },
    setCropBoxData() {
      if (!this.data) return;

      this.$refs.cropper.setCropBoxData(JSON.parse(this.data));
    },
    setData() {
      if (!this.data) return;

      this.$refs.cropper.setData(JSON.parse(this.data));
    },
    setImage(file) {

      if (!file.type.includes("image/")) {
        alert("Please select an image file");
        return;
      }

      if (typeof FileReader === "function") {
        const reader = new FileReader();

        reader.onload = (event) => {
          this.imgSrc = event.target.result;
          // rebuild cropperjs with the updated source
          this.$refs.cropper.replace(event.target.result);
        };

        reader.readAsDataURL(file);
      } else {
        alert("Sorry, FileReader API not supported");
      }
    },
    showFileChooser() {
      this.$refs.input.click();
    },
    zoom(percent) {
      this.$refs.cropper.relativeZoom(percent);
    },
  },
};
</script>

<style>
input[type="file"] {
  display: none;
}

.cropped-image {
  padding: 0 .8rem;
}

.img-cropper {
  max-height: 400px;
  overflow: hidden;
}

</style>

Using AvatarUpload Component

In any component where you want to implement the ImageEditing Features. use it like this


<template>
  <div>
    <v-container>
      <v-file-input
        v-model="avatarImage"
        label="File input"
      ></v-file-input>
      <AvatarUpload :image="avatarImage" @done="(image) => form.image=image"/>
    </v-container>
  </div>
</template>

<script>
import AvatarUpload from "@/components/Utils/AvatarUpload";

export default {
  components: {AvatarUpload},
  data() {
    return {
      avatarImage: null,
      form: {
        image: null
      }
    }
  },
}
</script>

<style scoped></style>