Forem: Honufa Khatun

JavaScript New Array Methods for Better, Cleaner Code

Honufa Khatun — Sat, 22 Feb 2025 11:06:22 +0000

New JavaScript comes with a collection of new array methods designed to make code more readable, maintainable, and performant. The methods promote immutability, reduce side effects, and simplify working with arrays. Let’s explore these new, powerful additions to the JavaScript arsenal.

Why Immutability Matters

Most of the traditional array methods like sort(), reverse(), and splice() modify the original array directly. This can lead to issues and bugs, especially in big applications where the same array is accessed somewhere in multiple locations in the code. Immutability, or not modifying data directly, prevents these issues. The new methods we will cover embrace immutability and return new arrays instead of modifying the ones that already exist.

The New Array Methods

The following is an overview of the most significant new array methods and how they can make your coding process easier:

findLast() and findLastIndex(): They are the reverse of find() and findIndex(), but they search for the element from right to left. This is very useful when you need to obtain the last index of an element that meets a certain condition.

const numbers = [1, 5, 3, 5, 2];
const lastFive = numbers.findLast(num => num === 5); // 5
const lastFiveIndex = numbers.findLastIndex(num => num === 5); // 3

toReversed(): Returns a fresh array with elements reversed, leaving the original unchanged. It's a side-effect-free counterpart to the usual reverse() operation.

const originalArray = [1, 2, 3];
const reversedArray = originalArray.toReversed(); // [3, 2, 1]
console.log(originalArray); // [1, 2, 3] (Original array remains unchanged)

toSorted(): Similar to toReversed():, this sorts the array and returns a fresh sorted array without altering the original.

const unsortedArray = [3, 1, 4, 2];
const sortedArray = unsortedArray.toSorted(); // [1, 2, 3, 4]
console.log(unsortedArray); // [3, 1, 4, 2]

toSpliced(): This method is the immutable version of splice(). It returns a new array with the specified changes (deletion or addition of elements), but does not modify the original.

const myArray = [1, 2, 3, 4];
const newArray = myArray.toSpliced(1, 2, 5, 6); // [1, 5, 6, 4] (Removes 2 elements and adds 2)
console.log(myArray); // [1, 2, 3, 4] (Original array remains unchanged)

with(): A more compact replacement for replacing an element at a specified index in an array without modifying the original.

const myArray = [10, 20, 30];
const newArray = myArray.with(1, 25); // [10, 25, 30] (Replaces element at index 1)
console.log(myArray); // [10, 20, 30] (Original array remains unchanged)

Advantages of Using These Functions

Improved Code Readability: These methods are likely to express intent better than their mutable counterparts.
Less Side Effects: Immutability avoids state changes, reducing the likelihood of side effects, which is easier to debug.
Better Maintainability: More readable code is less error-prone and easier to understand, modify, and maintain.
Improved Support for Functional Programming: These approaches are more in line with functional programming, where you can write more supportable and composable code.

Example: Combining Methods

const products = [
    { name: "Apple", price: 1.50 },
    { name: "Banana", price: 0.75 },
    { name: "Orange", price: 1.25 }
];

const sortedAndDiscounted = products
    .toSorted((a, b) => a.price - b.price) // Sort by price
    .with(0, {...products[0], price: products[0].price * 0.9}); // Apply 10% discount to the cheapest item


console.log(sortedAndDiscounted);

These new approaches can be elegantly chained together for sophisticated data transformations:

Browser Compatibility and Polyfills

While these methods are novel, they have solid support in browsers. If you need to support older browsers, however, you can employ polyfills to bridge the gap in the unavailable functionality. A polyfill is a piece of code that brings a new feature to an older environment. Libraries like core-js provide comprehensive polyfills for newer JavaScript features.

Conclusion

These new JavaScript array methods give us a powerful way of writing cleaner, more maintainable, and predictable code. By embracing immutability and minimizing the complexity of common array operations, they make it possible for developers to write more robust and scalable apps. Start incorporating them into your projects today and experience the benefits firsthand!

6 Powerful AI Research Tools to Improve Your Career

Honufa Khatun — Thu, 13 Feb 2025 17:18:23 +0000

The Six AI research tools that can boost your career by improving productivity, research skills, and work efficiency:

1. ChatGPT (by OpenAI)

🔹A powerful AI chatbot that assists in writing, coding, idea generation, and research.

🔹Helps in generating ideas, summarizing articles, and automating repetitive tasks.

2. YouChat

🔹An AI search assistant that provides direct and contextual responses.

🔹Perfect for quick research, summarizing topics, and answering complex questions.

3. Abacus

🔹A specialized AI solution for data analysis, financial modeling, and business insights.

🔹Aids professionals to analyze big data and make informed decisions.

4. Perplexity AI

🔹An AI-powered search engine with well-researched and well-sourced responses.

🔹Ideal for academic research, fact-checking, and extensive learning on any topic.

5. Copilot (by Microsoft)

🔹Built-in Microsoft Office (Word, Excel, PowerPoint) for automation.

🔹Aids document creation, data analysis, presentation, and report generation.

6. Gemini (by Google, formerly Bard)

🔹The research, problem-solving, and creative writing of chatbot AI.

🔹Compatible with Google services for enhancing search and knowledge access.

SEO Optimization Made Easy: Tips & Best Practices

Honufa Khatun — Thu, 13 Feb 2025 07:46:19 +0000

Search Engine Optimization (SEO) combines strategies, techniques, and practices designed to improve a website’s ranking on search engine results pages (SERPs). Below are some of the most significant steps:

1. Keyword Research

🔹Find Relevant Keywords: Utilize tools like Google Keyword Planner, Ahrefs, or SEMrush to identify keywords that are related to your niche.

🔹 Intent Focus: Choose keywords that address user intent — informational, navigational, or transactional.

🔹 Long-Tail Keywords: Target longer and more specific terms to have fewer competitors and greater conversions.

2. High-Quality Content Creation

🔹Original and Valuable: Create original, engaging, and informative content.

🔹Solve Problems: Address your audience’s issues or questions.

🔹Content Types: Employ blogs, videos, infographics, and guides.

🔹Update Regularly: Keep content updated and fresh for relevance.

3. On-Page Optimization

🔹Title Tags: Create engaging and keyword-dense titles.
🔹Meta Descriptions: Write short, keyword-driven descriptions.
🔹Header Tags (H1, H2, H3): Structurize content with headers to improve readability and keyword location.
🔹URL Structure: Keep neat, short, and descriptive URLs (example.com/seo-tips).
🔹Internal Linking: Link internally to other pages of your site to enhance navigation and distribution of link equity.

4. Technical SEO

🔹Mobile Optimization: Optimize your site for mobile and be responsive.
🔹Page Speed: Streamline loading times with tools like Google PageSpeed Insights.
🔹Secure Website: Use HTTPS to encrypt your site and create trust.
🔹Structured Data: Implement schema markup for rich snippets.
🔹Crawlability: Create a sitemap and ensure your site is crawlable for search engines.

5. Off-Page SEO

🔹Backlinks: Obtain quality backlinks from authoritative sites.

Guest blogging
Collaborations
Broken link building 🔹Social Signals: Share on social media to drive traffic and engagement. 🔹Brand Mentions: Get others to talk about your brand online.

6. User Experience (UX)

🔹Engagement Metrics: Reduce bounce rates and increase time on-site with improved usability.
🔹Clear Navigation: Enable easy access to information.
🔹Call to Action (CTA): Utilize clear CTAs to nudge users toward preferred actions.

7. Local SEO (if applicable)

🔹Google My Business: Claim your profile with precise NAP (Name, Address, Phone Number).
🔹Local Keywords: Optimize for keywords containing location modifiers.
🔹Reviews: Incentivize positive reviews and respond quickly.

8. Analytics and Monitoring

🔹Track Performance: Leverage tools such as Google Analytics and Google Search Console.
🔹A/B Testing: Experiment with different methods and see what works best.
🔹Regular Audits: Inspect and fix technical issues, broken links, and outdated content.

9. Adapt to Algorithm Updates

🔹Stay up to date with search engine algorithm updates (e.g., Google Core Updates).
🔹Read industry blogs like Moz, Search Engine Journal, and Neil Patel.

ES6 Rest Parameters: Handling Function Arguments the Smart Way

Honufa Khatun — Wed, 12 Feb 2025 11:50:32 +0000

Overview

In this tutorial, you will learn how to utilize JavaScript rest parameters to gather multiple function arguments effectively in an array.

Introduction to Rest Parameters

ES6 brought the rest parameter, represented by three dots (…), that enables functions to accept an indefinite number of arguments as an array.

Syntax

const fn = (a, b, ...args) => {
   // args is an array
};

Here, a and b capture the first two arguments, and args gathers the rest as an array.

Example Usage:

fn(1, 2, 3, "A", "B", "C");

In this case, args stores:

[3, "A", "B", "C"]

If only two arguments are passed:

fn(1, 2);

Then args is an empty array:

[]

Rest Parameter Rules

Must be the last parameter in a function definition:

const fn = (a, ...rest, b) => { // ❌ Syntax Error
};

//SyntaxError: Rest parameter must be last formal parameter

More Examples:

1. Summing Numbers definition

const sum = (...args) => args.reduce((total, a) => total + a, 0);
console.log(sum(1, 2, 3)); // Output: 6

2. Filtering Only Numbers

If arguments contain different data types, filter out only numbers:

const sum = (...args) => args
  .filter(e => typeof e === 'number')
  .reduce((prev, curr) => prev + curr, 0);

console.log(sum(10, 'Hi', null, undefined, 20)); // Output: 3

Rest Parameters vs Arguments Object

The arguments object is present in legacy functions but is not an actual array. Therefore, it does not include array methods such as filter() and reduce().

Example Without Rest Parameters (Using arguments)

function sum() {
  return Array.prototype.filter.call(arguments, e => typeof e === 'number')
    .reduce((prev, curr) => prev + curr, 0);
}

Rest parameters make the code more readable and modern.

Filtering Arguments by Type

const filterBy = (type, ...args) => args.filter(e => typeof e === type);

Rest Parameters with Arrow Functions

Arrow functions do not have an arguments object, so the rest parameters are necessary:

const combine = (...args) => args.join(" ");
console.log(combine("JavaScript", "Rest", "Parameters")); // Output: "JavaScript Rest Parameters"

Rest Parameters in Dynamic Functions

You can use rest parameters in functions created dynamically with the Function constructor:

const showNumbers = new Function('...numbers', 'console.log(numbers)');
showNumbers(1, 2, 3); // Output: [1, 2, 3]

Conclusion

Rest parameters permit functions to receive any amount of arguments as an array.
They have to be the last parameter of a function.
Unlike arguments, rest parameters are actual arrays and include array methods.

Mastering Modern CSS: Unleashing @property and @supports for Dynamic Designs

Honufa Khatun — Tue, 11 Feb 2025 13:21:48 +0000

CSS @property Rule

The CSS @property rule lets developers declare custom properties (CSS variables) with types, default values, and inheritance. It provides typed CSS variables that are more stable and easier to use in animations.

1. Syntax

@property --variable-name {
  syntax: "<data-type>";  /* Defines the type (color, length, number, etc.) */
  inherits: true | false;  /* Specifies if it should be inherited */
  initial-value: value;    /* Sets a default value */
}

Example: Typed CSS Variable

@property --main-color {
  syntax: "<color>";
  inherits: true;
  initial-value: blue;
}

div {
  background-color: var(--main-color);
}

🔹 Ensures that --main-color is always a color and defaults to blue.

Example: Animating a Custom Property

@property --border-size {
  syntax: "<length>";
  inherits: false;
  initial-value: 2px;
}

.box {
  border: var(--border-size) solid black;
  transition: --border-size 0.5s ease-in-out;
}

.box:hover {
  --border-size: 10px;
}

🔹Allows --border-size to be animated, something that cannot be achieved with normal CSS variables.

Why Use @property?
✅ Better control over custom properties (type restriction, set defaults).
✅ Allow CSS transitions & animations on custom properties.
✅ Easier to maintain with variables being used properly.
Supported Data Types

6. Browser Support
🔹@property is experimental and only supported in Chromium-based browsers (Chrome, Edge, Opera) for now.

🔹Not supported yet in Firefox & Safari.

Animated Gradient with @property This example animates a gradient background color smoothly using a typed CSS variable.

@property --hue {
  syntax: "<number>";  /* Restrict to number values */
  inherits: false;
  initial-value: 0;    /* Default hue is 0 (red) */
}

.animated-box {
  width: 300px;
  height: 300px;
  border-radius: 20px;
  animation: hueShift 5s linear infinite;
  background: linear-gradient(135deg, hsl(var(--hue), 100%, 50%), hsl(calc(var(--hue) + 60), 100%, 50%));
}

/* Animate the custom property */
@keyframes hueShift {
  from {
    --hue: 0;   /* Red */
  }
  to {
    --hue: 360; /* Full spectrum */
  }
}

🔹How It Works

1.@property --hue declares a custom property that stores a number (hue value for HSL colors).

hueShift animation alters --hue from 0 (red) to 360 (the entire color spectrum).
background applies hsl(var(--hue), 100%, 50%) to generate a smoothly transitioning gradient.
animation is configured to repeat indefinitely, producing a never-ending color-shifting effect.

✨ Live Effect
This effect produces a shimmering rainbow-colored animated gradient!

CSS @supports Rule

CSS @supports rule, also known as CSS Feature Query, enables developers to conditionally apply styles depending on the support for a specific CSS feature or property by the browser. It's similar to @media queries but checks for feature support instead of viewport size.

1. Syntax

@supports (property: value) {
/* CSS rules applied if the browser supports the property */
}

Example:

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

🔹In case the browser supports CSS Grid (display: grid), styles within @supports will be enabled.

2. Using Multiple Conditions

AND (and): All the conditions should be fulfilled.
OR (or): Need at least one condition to be true.
NOT (not): Only apply the styles if the feature is not supported. Examples:

/* Both flexbox and gap must be supported */
@supports (display: flex) and (gap: 10px) {
  .flex-container {
    display: flex;
    gap: 10px;
  }
}

/* Apply styles if either grid or flexbox is supported */
@supports (display: grid) or (display: flex) {
  .container {
    display: grid;
  }
}

/* Apply styles if display: grid is NOT supported */
@supports not (display: grid) {
  .container {
    display: block;
  }
}

Use Cases:

🔹Progressive Enhancement: Apply new CSS features only when supported.

🔹Graceful Fallbacks: Supply alternative styles when some features are not available.

🔹Cross-Browser Compatibility: Deal with inconsistencies in various browsers.