DEV Community: Lakh Bawa

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>

Image Preview Before Upload In VueJS Project

Lakh Bawa — Sat, 26 Dec 2020 14:08:57 +0000

Hi Everyone, Hope you are doing well and staying safe,

Today I will be sharing with you the small snippet of code that can help you to preview the image the user before it gets uploaded

Create a Directory and File.

mixins/ImagePreviewMixin.vue

<script>
export default {
  data() {
    return {
      imagePreviewURL: null,
    }
  },
  methods: {
    onFileChange(payload) {
      //const file = payload.target.files[0]; // use it in case of normal HTML input
      const file = payload; // in case vuetify file input
      if (file) {
        this.imagePreviewURL = URL.createObjectURL(file);
        URL.revokeObjectURL(file); // free memory
      } else {
        this.imagePreviewURL =  null
      }
    }
  },
}
</script>

We have created the Mixin and we can import that mixin into component

for example

components/UpdateUserAvatar.vue

<script>
import ImagePreviewMixin from "@/mixins/ImagePreviewMixin";

export default {

  mixins: [ImagePreviewMixin],
}
</script>

<template><div>
Using Vuetify
<v-file-input
                    v-model="avatarImage"

                    label="Image"
                    required
                    @change="onFileChange"
                  ></v-file-input>

/* IN case of Normal HTML Input
<input
                    v-model="avatarImage"
                   type="file"
                    label="Image"
                    required
                    @change="onFileChange"
                  ></v-file-input>
*/

<img
                    v-if="imagePreviewURL"
                    :src="imagePreviewURL"
                    alt=""
                    style="max-width: 100%;width: 250px; object-fit: cover"
                  />
</div></template>

How to write clean Code (1)

Lakh Bawa — Thu, 10 Dec 2020 09:50:43 +0000

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

I recently came across an awesome GitHub repo,

which enlists the ideas to write cleaner code. Examples are written in javascript, but applies to most of the programming languages.

Here I am going to mention some of the most important and usually ignored takeaways from that repo.

Function arguments (2 or fewer ideally)

One or two arguments is the ideal case, and three should be avoided if possible. Anything more than that should be consolidated. Usually, if you have more than two arguments then your function is trying to do too much. In cases where it's not, most of the time a higher-level object will suffice as an argument.

Bad:

function createMenu(title, body, buttonText, cancellable) {
  // ...
}

createMenu("Foo", "Bar", "Baz", true);

Good:

function createMenu({ title, body, buttonText, cancellable }) {
  // ...
}

createMenu({
  title: "Foo",
  body: "Bar",
  buttonText: "Baz",
  cancellable: true
});

Functions should do one thing

This is by far the most important rule in software engineering. When functions do more than one thing, they are harder to compose, test, and reason about. When you can isolate a function to just one action, it can be refactored easily and your code will read much cleaner. If you take nothing else away from this guide other than this, you'll be ahead of many developers.

Bad:

function emailClients(clients) {
  clients.forEach(client => {
    const clientRecord = database.lookup(client);
    if (clientRecord.isActive()) {
      email(client);
    }
  });
}

Good:

function emailActiveClients(clients) {
  clients.filter(isActiveClient).forEach(email);
}

function isActiveClient(client) {
  const clientRecord = database.lookup(client);
  return clientRecord.isActive();
}

Functions should only be one level of abstraction

When you have more than one level of abstraction your function is usually
doing too much. Splitting up functions leads to reusability and easier
testing.

Bad:

function parseBetterJSAlternative(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      // ...
    });
  });

  const ast = [];
  tokens.forEach(token => {
    // lex...
  });

  ast.forEach(node => {
    // parse...
  });
}

Good:

function parseBetterJSAlternative(code) {
  const tokens = tokenize(code);
  const syntaxTree = parse(tokens);
  syntaxTree.forEach(node => {
    // parse...
  });
}

function tokenize(code) {
  const REGEXES = [
    // ...
  ];

  const statements = code.split(" ");
  const tokens = [];
  REGEXES.forEach(REGEX => {
    statements.forEach(statement => {
      tokens.push(/* ... */);
    });
  });

  return tokens;
}

function parse(tokens) {
  const syntaxTree = [];
  tokens.forEach(token => {
    syntaxTree.push(/* ... */);
  });

  return syntaxTree;
}

Getting the abstraction right is critical, that's why you should follow the SOLID principles laid out in the Classes section. Bad abstractions can be worse than duplicate code, so be careful! Having said this, if you can make a good abstraction, do it! Don't repeat yourself, otherwise, you'll find yourself updating multiple places anytime you want to change one thing.

Don't use flags as function parameters

Flags tell your user that this function does more than one thing. Functions should do one thing. Split out your functions if they are following different code paths based on a boolean.

Bad:

function createFile(name, temp) {
  if (temp) {
    fs.create(`./temp/${name}`);
  } else {
    fs.create(name);
  }
}

Good:

function createFile(name) {
  fs.create(name);
}

function createTempFile(name) {
  createFile(`./temp/${name}`);
}

Favor functional programming over imperative programming

JavaScript isn't a functional language in the way that Haskell is, but it has a functional flavor to it. Functional languages can be cleaner and easier to test. Favor this style of programming when you can.

Bad:

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

Good:

const programmerOutput = [
  {
    name: "Uncle Bobby",
    linesOfCode: 500
  },
  {
    name: "Suzie Q",
    linesOfCode: 1500
  },
  {
    name: "Jimmy Gosling",
    linesOfCode: 150
  },
  {
    name: "Gracie Hopper",
    linesOfCode: 1000
  }
];

const totalOutput = programmerOutput.reduce(
  (totalLines, output) => totalLines + output.linesOfCode,
  0
);

Encapsulate conditionals

Bad:

if (fsm.state === "fetching" && isEmpty(listNode)) {
  // ...
}

Good:

function shouldShowSpinner(fsm, listNode) {
  return fsm.state === "fetching" && isEmpty(listNode);
}

if (shouldShowSpinner(fsmInstance, listNodeInstance)) {
  // ...
}

Prefer composition over inheritance

It basically means that where possible do not extend other classes to bring the functionality of that class into the current class, but create a local property and initiate that class into that property.
and use it

Bad:

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  // ...
}


// Bad because Employees "have" tax data. EmployeeTaxData is not a type of Employee
class EmployeeTaxData extends Employee {
  constructor(ssn, salary) {
    super();
    this.ssn = ssn;
    this.salary = salary;
  }

  // ...
}

Good:

class EmployeeTaxData {
  constructor(ssn, salary) {
    this.ssn = ssn;
    this.salary = salary;
  }

  // ...
}

class Employee {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  setTaxData(ssn, salary) {
    this.taxData = new EmployeeTaxData(ssn, salary);
  }
  // ...
}

Single Responsibility Principle (SRP)

As stated in Clean Code, "There should never be more than one reason for a class to change". It's tempting to jam-pack a class with a lot of functionality, like when you can only take one suitcase on your flight. The issue with this is that your class won't be conceptually cohesive and it will give it many reasons to change. Minimizing the amount of times you need to change a class is important. It's important because if too much functionality is in one class and you modify a piece of it, it can be difficult to understand how that will affect other dependent modules in your codebase.

Bad:

class UserSettings {
  constructor(user) {
    this.user = user;
  }

  changeSettings(settings) {
    if (this.verifyCredentials()) {
      // ...
    }
  }

  verifyCredentials() {
    // ...
  }
}

Good:


class UserAuth {
  constructor(user) {
    this.user = user;
  }

  verifyCredentials() {
    // ...
  }
}

class UserSettings {
  constructor(user) {
    this.user = user;
    this.auth = new UserAuth(user);
  }

  changeSettings(settings) {
    if (this.auth.verifyCredentials()) {
      // ...
    }
  }
}

Covered until
https://github.com/ryanmcdermott/clean-code-javascript#openclosed-principle-ocp

References:
https://github.com/ryanmcdermott/clean-code-javascript#openclosed-principle-ocp