Forem: Zaid Rehman

Why 0.1 + 0.2 0.3 in JavaScript: The Truth About Floating-Point Numbers

Zaid Rehman — Sat, 01 Nov 2025 13:06:12 +0000

Why `0.1 + 0.2` ≠ `0.3` in JavaScript

If you’ve ever typed this into your console:

0.1 + 0.2 === 0.3 // false
console.log(0.1 + 0.2) // 0.30000000000000004

…and felt confused, you’re not alone.

This tiny difference has confused developers for years, but once you understand floating-point numbers, it all makes sense.

🧮 What’s Going On?

JavaScript stores every number (except BigInt) as a 64-bit IEEE 754 floating-point value.

That means numbers are represented in binary, not decimal.

And here’s the problem:

Some decimal numbers simply can’t be represented exactly in binary form.

For example:

1/3 is an infinite repeating decimal in base 10: 0.333333...
Similarly, 0.1 is an infinite repeating fraction in base 2 (binary).

JavaScript can’t store infinite digits, so it rounds the value slightly.

That’s why when you add 0.1 + 0.2, you get 0.30000000000000004.

💡 The Science Behind It

Every floating-point number is stored as three parts:

Sign bit (positive or negative)
Exponent (how large or small the number is)
Mantissa (the precise digits)

This structure gives huge range (from 10⁻³²⁴ to 10³⁰⁸) but limited precision, about 15–17 decimal digits.

So small rounding errors are completely normal.

⚠️ Why It Matters

In most cases, these tiny errors don’t break anything.

But when you compare floats directly or work with money, they can cause problems.

❌ Don’t do this:

if (price === 0.3) {
  console.log("Exact match");
}

This check might fail even when the numbers look equal.

✅ Do this instead:

if (Math.abs(price - 0.3) < Number.EPSILON) {
  console.log("Close enough!");
}

Number.EPSILON is the smallest difference between two representable numbers, perfect for “almost equal” checks.

💰 When You Need Perfect Precision

If you’re handling prices, interest rates, or scientific data, rounding errors are unacceptable.

In those cases, use decimal libraries designed for precise math:

decimal.js
big.js
Or use BigInt for whole numbers only.

Example with decimal.js:

const Decimal = require('decimal.js');
const result = new Decimal(0.1).plus(0.2);
console.log(result.toString()); // "0.3"

🧠 Key Takeaways

JavaScript numbers are binary floating-point values
Some decimals cannot be represented exactly
Always use tolerance (Number.EPSILON) when comparing floats
Round numbers only for display, not for logic
For money or math-heavy apps, use a decimal library

🔍 TL;DR

0.1 + 0.2 === 0.3 // false
// Because floating-point math is not perfect decimal math

Once you understand this, you’ll never be surprised by 0.30000000000000004 again.

Custom Pages: Uses and Creation

Zaid Rehman — Sat, 28 Dec 2024 23:35:29 +0000

Introduction:

Welcome to the next tutorial in the Fynd Platform Theme Development series. In this session, we’ll dive into custom pages, their uses, and how to create them. Custom pages are mounted under the /c/ route prefix, with flexibility to define paths after /c/. By the end of this tutorial, you’ll know how to create, register, and render custom pages seamlessly. Official Documentation

1. What Are Custom Pages?

Custom pages are React components designed for unique use cases where existing system pages don’t suffice. They are accessible through routes prefixed with /c/, and the segments after /c/ are fully customizable.

Key Features:

Mounted under /c/ (e.g., /c/author).
Fully customizable paths after /c/.
Ideal for promotional pages, brand-specific layouts, or forms.

2. Directory Structure for Custom Pages

Custom pages are stored in the custom-templates directory within your theme. Here's the recommended structure:

theme/
├── custom-templates/
│   ├── author.jsx
│   ├── about.jsx
│   └── index.jsx
├── pages/
├── sections/
├── components/
├── styles/
├── index.jsx

3. Creating a Custom Page

Step 1: Define the Page Component
Create a new file, for example, author.jsx, in the custom-templates directory.

import React from "react";
import { useParams } from "react-router-dom";

function Author() {
  const { userId } = useParams(); // Fetch route parameters if needed

  return (
    <div>
      <h1>Author Profile</h1>
      <p>Welcome to the author page of user {userId}</p>
    </div>
  );
}

Author.serverFetch = async ({ fpi, router }) => {
  const { userId } = router.params;
  return apiCallToFetchAuthor({ userId });
};

export default Author;

4. Registering Custom Pages

Custom pages must be registered in the custom-templates/index.jsx file using React Router's dynamic routing.

Example index.jsx:

import React from "react";
import { Route } from "react-router-dom";
import Author from "./author";
import About from "./about";

export default [
  <Route path="/c/author/:userId" element={<Author />} />,
  <Route path="/c/about" element={<About />} />,
];

5. Adding Custom Pages to `index.jsx`

Example index.jsx:

import customTemplates from "./custom-templates";

export default async () => {
  return {
    customTemplates,
    // other keys...
  };
};

6. Fetching Data with serverFetch

Custom pages can fetch data dynamically using the serverFetch static method in the component. This method is executed during server-side rendering.

Example: Using serverFetch

Author.serverFetch = async ({ fpi, router }) => {
  const { userId } = router.params;
  return fpi.users.fetchUserData({ userId });
};

7. Best Practices

Reusable Components:
Create shared components for consistent functionality across custom pages.

Error Handling:
Ensure custom pages handle missing or incorrect data gracefully.

SEO Optimization:
Add metadata such as titles and descriptions for custom pages.

8. Real-Life Use Cases

Promotional Pages:
Use custom pages for limited-time offers or special campaigns.

Brand Pages:
Design unique layouts to showcase specific brands.

Custom Forms:
Create pages for feedback, surveys, or other custom inputs.

9. Benefits of Custom Pages

Controlled Flexibility: Routes are under /c/, but the segments after /c/ are fully customizable.
Scalability: Integrate unique features or layouts.
Personalization: Tailor pages to specific user or merchant needs.

Conclusion:

Custom pages empower developers to create unique, purpose-driven pages with routes defined under /c/. By using serverFetch, you can dynamically load data and enhance the functionality of these pages.

In the next tutorial, we’ll explore marketing pages and their integration. Stay tuned!

System Page Understanding and Using Section Renderer

Zaid Rehman — Sat, 28 Dec 2024 23:14:15 +0000

Introduction:

In this tutorial, we’ll explore system pages in Fynd Platform themes, focusing on the Home Page. We will understand how to use the SectionRenderer component to render dynamic sections, fetch necessary data using pageDataResolver, and correctly register the Home Page and resolver in the index.jsx file with dynamic imports. Official Documentation

1. What Are System Pages?

System pages are predefined pages essential to a theme's functionality, such as the homepage, product listing page, and cart page. These pages:

Have fixed routes like / for the homepage.
Are stored in the theme/pages directory.
Must be registered in the index.jsx bootstrap file.

2. Directory Structure

The home.jsx file is located in the following structure:

theme/
├── pages/
│   ├── home.jsx
│   ├── product-listing.jsx
│   ├── cart.jsx
│   └── other-system-pages.jsx
├── sections/
├── components/
│   └── loader.jsx
├── styles/
├── helpers/
│   └── pageDataResolver.js
├── index.jsx

3. Home Page Example

The home.jsx file defines the homepage layout and renders sections dynamically using the SectionRenderer component.

Code Example for home.jsx:

import React from "react";
import { SectionRenderer } from "fdk-core/components";
import { useGlobalStore, useFPI } from "fdk-core/utils";
import Loader from "../components/loader/loader";

function Home() {
  const fpi = useFPI();
  const page = useGlobalStore(fpi.getters.PAGE) || {};
  const { sections = [], error, isLoading } = page || {};

  if (error) {
    return (
      <>
        <h1>Error Occurred!</h1>
        <pre>{JSON.stringify(error, null, 4)}</pre>
      </>
    );
  }

  return (
    <div className="basePageContainer margin0auto">
      {!isLoading && <SectionRenderer sections={sections} />}
      {isLoading && <Loader />}
    </div>
  );
}

export default Home;

4. Fetching Page Data Using `pageDataResolver`

The pageDataResolver function is responsible for fetching data needed for the page. This ensures the page renders with the latest content.

Example Implementation for pageDataResolver.js:

import { getPageSlug } from "fdk-core/utils";

export async function pageDataResolver({ fpi, router }) {
  const state = fpi.store.getState();
  const pageSlug = getPageSlug(router) || "home";
  const currentPage = fpi.getters.PAGE(state)?.value;

  if (pageSlug !== currentPage) {
    await fpi.theme.fetchPage({ pageValue: pageSlug });
  }
}

5. Registering the Home Page and Resolver in `index.jsx`

To integrate the Home Page and its pageDataResolver, use dynamic imports for modular and efficient loading.

Updated index.jsx:

import { pageDataResolver } from "./helpers/pageDataResolver";

export default async () => {
  return {
    // Page Resolver
    pageDataResolver,

    // Register System Pages
    getHome: () =>
      import(/* webpackChunkName: "homePage" */ "./pages/home"),

    // Register Other Pages Here...
  };
};

6. Best Practices for Registration

Dynamic Imports:
Use dynamic imports with Webpack’s /* webpackChunkName */ to create separate chunks for each page component.

Modular Structure:
Organize helpers like pageDataResolver in a dedicated helpers directory.

Error Handling:
Ensure that the pageDataResolver handles missing or incorrect data gracefully.

Data Optimization:
Avoid fetching redundant data in the pageDataResolver.

7. Benefits of Dynamic Import and Resolver Integration

Improved Performance:
Pages are loaded only when required, reducing the initial bundle size.

Simplified Maintenance:
Modular structure allows easy updates and testing.

Enhanced User Experience:
Dynamic section rendering ensures pages are interactive and responsive.

Conclusion:

The Home Page serves as the foundation of your theme, combining dynamic section rendering with effective data fetching. By registering the Home Page and its resolver correctly in index.jsx, you can ensure a scalable and maintainable theme architecture.

In the next tutorial, we’ll explore custom pages for specialized merchant requirements. Stay tuned!

Server-Side Rendering in Sections

Zaid Rehman — Sat, 28 Dec 2024 22:28:57 +0000

Introduction:

Welcome to the fourth tutorial in the Fynd Platform Theme Development series. In this session, we will focus on implementing server-side rendering (SSR) for sections using the serverFetch function. We’ll utilize a detailed GraphQL query to fetch product data dynamically and integrate it into the section using useGlobalStore. By the end of this tutorial, you’ll understand how to fetch data server-side and pre-render sections for enhanced performance and SEO.

1. What Is Server-Side Rendering?

Server-side rendering (SSR) ensures that web page content is rendered on the server before being sent to the client. Key benefits include:

Improved initial page load speed.
Enhanced SEO due to pre-rendered content.
Preloaded dynamic data before JavaScript execution on the client.

In Fynd themes, the serverFetch function facilitates fetching and passing data to sections during SSR.

2. Anatomy of a Section with severFetch

Sections are modular and reusable building blocks of a Fynd theme. A section consists of the following parts:

Component: Defines the React component responsible for rendering the section.
serverFetch (Optional): Fetches data during server-side rendering.
settings: Configures the section with customizable properties and blocks.
blocks (Optional): Represents nested, reusable content units.

Example Section Structure:

export function Component({ props = {}, blocks = [] }) {
  return <div>{props.title}</div>;
}

Component.serverFetch = async ({ fpi, router }) => {
  const slug = router?.params?.slug;
  const query = `
    query($slug: String!) {
      product(slug: $slug) {
        name
      }
    }
  `;
  return fpi.executeGQL(query, { slug });
};

export const settings = {
  label: "Example Section",
  props: [
    { id: "title", label: "Title", type: "text", default: "Default Title" },
  ],
  blocks: [
    {
      label: "Example Block",
      type: "text",
      props: [
        { id: "content", label: "Content", type: "text", default: "" },
      ],
    },
  ],
};

3. GraphQL Query for Product Data Official Documentation

Here’s the GraphQL query we’ll use to fetch product details:

query($slug: String!) {
  product(slug: $slug) {
    name
    description
    price {
      effective {
        currency_symbol
        min
      }
      marked {
        currency_symbol
        min
      }
    }
    media {
      url
      alt
    }
    brand {
      name
      logo {
        url
        alt
      }
    }
    categories {
      name
    }
    variants {
      key
      items {
        name
        slug
      }
    }
    short_description
  }
}

This query retrieves product details, including name, price, images, and metadata.

4. Implementing serverFetch

Define serverFetch

The serverFetch function executes the GraphQL query to fetch product data by slug:

Component.serverFetch = async ({ fpi, router }) => {
  const slug = router?.params?.slug; // Fetch slug from the router
  const query = `
    query($slug: String!) {
      product(slug: $slug) {
        name
        description
        price {
          effective {
            currency_symbol
            min
          }
          marked {
            currency_symbol
            min
          }
        }
        media {
          url
          alt
        }
        brand {
          name
          logo {
            url
            alt
          }
        }
        categories {
          name
        }
        variants {
          key
          items {
            name
            slug
          }
        }
        short_description
      }
    }
  `;

  const variables = { slug };

  return fpi.executeGQL(query, variables);
};

5. Accessing Product Data Using useGlobalStore

Retrieve Data
Use the useGlobalStore hook to fetch the data provided by serverFetch:

import { useGlobalStore } from "fdk-core/utils";

const productDetails = useGlobalStore(fpi.getters.PRODUCT);
const { product_details: { uid }, product_meta, product_price_by_slug } = productDetails;

Render the Component
Render the section with the fetched product details:

import { useGlobalStore } from "fdk-core/utils";

export function Component() {
  const productDetails = useGlobalStore(fpi.getters.PRODUCT);
  const { product_details: { uid, name, description, short_description }, product_price_by_slug } = productDetails;

  if (!productDetails) return <div>Loading...</div>;

  return (
    <div>
      <h1>{name}</h1>
      <p>{short_description}</p>
      <p>{description}</p>
      <p>
        Effective Price: {product_price_by_slug.price.effective.currency_symbol}
        {product_price_by_slug.price.effective.min}
      </p>
      <p>
        Marked Price: {product_price_by_slug.price.marked.currency_symbol}
        {product_price_by_slug.price.marked.min}
      </p>
    </div>
  );
}

6. Advanced Use Cases

Fetching Multiple Data Points
Extend the GraphQL query to fetch additional data, such as promotions and coupons:

promotions(slug: $slug, pageSize: 30) {
  available_promotions {
    promotion_name
    offer_text
  }
}
coupons {
  available_coupon_list {
    title
    coupon_code
    coupon_value
  }
}

Update the serverFetch function:

Component.serverFetch = async ({ fpi, router }) => {
  const slug = router?.params?.slug;
  const query = `
    query($slug: String!) {
      product(slug: $slug) {
        name
        ...
      }
      promotions(slug: $slug, pageSize: 30) {
        available_promotions {
          promotion_name
          offer_text
        }
      }
      coupons {
        available_coupon_list {
          title
          coupon_code
          coupon_value
        }
      }
    }
  `;

  const variables = { slug };
  return fpi.executeGQL(query, variables);
};

Error Handling
Add error handling for robustness:

Component.serverFetch = async ({ fpi, router }) => {
  try {
    const slug = router?.params?.slug;
    const query = `
      query($slug: String!) { ... }
    `;
    return await fpi.executeGQL(query, { slug });
  } catch (error) {
    console.error("Error fetching data:", error);
    return { error: "Failed to fetch data" };
  }
};

7. Best Practices for serverFetch

Optimize Queries: Fetch only required fields to minimize payload size.
Use useGlobalStore Effectively: Leverage getters for seamless integration with the Redux store.
Handle Errors Gracefully: Display fallback data or error messages for missing content.
Cache Responses: Use caching to reduce redundant API calls.
Test Thoroughly: Validate serverFetch in local, staging, and production environments.

Conclusion:

With serverFetch and useGlobalStore, you can efficiently fetch, store, and render server-side data for sections. This approach enhances both performance and SEO, making your themes more robust and user-friendly.

In the next tutorial, we’ll explore global configurations to manage theme-wide settings. Stay tuned!

Using Blocks in Sections

Zaid Rehman — Sat, 28 Dec 2024 21:48:56 +0000

Introduction:

Welcome to the third tutorial in the Fynd Platform Theme Development series. In this session, we will focus on blocks, a crucial part of building modular, reusable, and customizable theme sections. By the end of this tutorial, you’ll understand how to define blocks, use them in sections, and leverage their capabilities to create dynamic and merchant-configurable content. Official Documentation

1. What Are Blocks?

Blocks represent individual configurable units within a section. A section can contain multiple blocks, each with its own properties. For example:

A banner section might contain blocks for images and captions.
A product slider section might have blocks for each product card.

Blocks are defined in the settings.blocks array of a section's configuration file.

2. Anatomy of a Block

Each block consists of:

label: Describes the block in the theme editor.
type: Specifies the block type (e.g., image, text, range).
props: Contains the configurable properties of the block.

Example block configuration:

blocks: [
    {
        label: "Image Card",
        type: "gallery",
        props: [
            {
                id: "image_url",
                label: "Image URL",
                type: "image_picker",
                default: "",
                info: "Upload or select an image for this card."
            },
            {
                id: "alt_text",
                label: "Alt Text",
                type: "text",
                default: "Alt Text",
                info: "Text describing the image for accessibility."
            },
            {
                id: "caption",
                label: "Caption",
                type: "text",
                default: "Enter caption here",
                info: "Caption displayed below the image."
            }
        ]
    }
]

3. Using Blocks in a Section

To use blocks in a section:

Define Blocks in the Section Settings
Add the blocks configuration in the settings object of your section:

export const settings = {
    label: "Image Gallery",
    blocks: [
        {
            label: "Image Card",
            type: "gallery",
            props: [
                {
                    id: "url",
                    label: "Image URL",
                    type: "image_picker",
                    default: "",
                    info: "Upload an image."
                },
                {
                    id: "caption",
                    label: "Caption",
                    type: "text",
                    default: "Default Caption",
                    info: "Caption for the image."
                }
            ]
        }
    ],
    props: [],
};

Access Blocks in the Component
Use the blocks prop passed to the section's component to render block data:

import React from "react";

export function Component({ blocks }) {
    if (!blocks || blocks.length === 0) return null;

    return (
        <div className="image-gallery">
            {blocks.map((block, index) => (
                <div key={index} className="image-card">
                    <img src={block.props.url.value} alt={block.props.caption.value} />
                    <p>{block.props.caption.value}</p>
                </div>
            ))}
        </div>
    );
}

4. Advanced Block Features

Default Values
Default values ensure blocks have initial data when no input is provided. For example:

props: [
    {
        id: "heading",
        label: "Heading",
        type: "text",
        default: "Welcome to our Store",
        info: "Text displayed as the section heading."
    }
]

Multiple Block Types
A section can define multiple block types:

blocks: [
    {
        label: "Banner",
        type: "banner",
        [/* ... */]
    },
    {
        label: "Product Card",
        type: "product",
        [/* ... */]
    }
]

5. Real-Life Use Cases

Banner Section with Multiple Slides

Each slide is represented as a block with properties like image, title, and link.

Settings:

blocks: [
    {
        label: "Slide",
        type: "slide",
        props: [
            {
                id: "image",
                label: "Image",
                type: "image_picker",
                default: "",
                info: "Upload an image for the slide."
            },
            {
                id: "title",
                label: "Title",
                type: "text",
                default: "",
                info: "Title displayed on the slide."
            },
            {
                id: "link",
                label: "Link",
                type: "url",
                default: "",
                info: "URL to navigate when the slide is clicked."
            }
        ]
    }
]

Rendering:

export function Component({ blocks }) {
    return (
        <div className="banner-carousel">
            {blocks.map((block, index) => (
                <div key={index} className="slide">
                    <img src={block.props.image.value} alt={block.props.title.value} />
                    <h3>{block.props.title.value}</h3>
                    <a href={block.props.link.value}>Learn More</a>
                </div>
            ))}
        </div>
    );
}

Product Grid with Configurable Items

Each product is a block containing properties like image, name, and price.

Settings:

blocks: [
    {
        label: "Product",
        type: "product",
        props: [
            { id: "image", label: "Image", type: "image_picker", default: "" },
            { id: "name", label: "Name", type: "text", default: "" },
            { id: "price", label: "Price", type: "text", default: "" }
        ]
    }
]

Rendering:

export function Component({ blocks }) {
    return (
        <div className="product-grid">
            {blocks.map((block, index) => (
                <div key={index} className="product-card">
                    <img src={block.props.image.value} alt={block.props.name.value} />
                    <h4>{block.props.name.value}</h4>
                    <p>${block.props.price.value}</p>
                </div>
            ))}
        </div>
    );
}

6. Best Practices

Keep Blocks Modular: Define distinct block types for different use cases.
Optimize for Reusability: Use generic and reusable block settings to minimize redundancy.
Use Defaults Smartly: Always set meaningful default values to enhance the out-of-box experience.
Validate Inputs: Ensure inputs are validated to avoid errors during rendering.

Conclusion:

Blocks are powerful tools for creating dynamic and customizable themes on the Fynd Platform. By leveraging blocks, you can build modular sections that offer a high degree of flexibility for merchants. Experiment with different block configurations to explore their full potential.

In the next tutorial, we’ll dive into global configurations to manage theme-level settings. See you there!

Building and Customizing Sections

Zaid Rehman — Fri, 27 Dec 2024 12:20:34 +0000

Welcome to Tutorial 2 of the Fynd Platform Theme Development series. In this session, we will dive into creating and updating sections for a theme. Sections are reusable UI components that empower merchants to customize their storefronts easily. Official Documentation

1. What Are Sections?

Sections in the Fynd Platform are reusable React components stored in the sections folder of a theme. They are configurable through the theme editor, allowing merchants to adjust their settings without altering the code. Each section typically includes:

A Component: Defines the section's visual interface.
A Settings Object: Holds the configuration schema for the sectionsection-overviewsettings-object.

2. Anatomy of a Section

Here’s an example of a basic section that displays an HTML paragraph:

import React from 'react';

export function Component({ props }) {
    const descValue = props?.description?.value;
    if (!descValue) return null;

    return <p>{descValue}</p>;
}

export const settings = {
    label: "Section Description",
    props: [
        {
            id: "description",
            label: "Description",
            type: "text",
            default: "",
            info: "Description text of the section",
        },
    ],
    blocks: [],
};

3. Adding a New Section

To add a new section:

Navigate to the sections folder in your theme directory.
Create a new file, e.g., custom-section.jsx.
Define both the Component and settings exports.

4. Updating Section Settings

Use the settings object to define the configuration options. The object can include:

label: The name of the section in the editor.
props: Customizable properties of the section.

Example:

export const settings = {
    label: "Custom Section",
    props: [
        {
            id: "title",
            label: "Title",
            type: "text",
            default: "Default Title",
            info: "Enter a title for the section.",
        },
        {
            id: "color",
            label: "Color",
            type: "color",
            default: "#000000",
            info: "Choose a color for the text.",
        },
    ]
};

5. Previewing Changes

To preview your section:

Sync your theme to the Fynd Platform using the CLI command.
Open the Theme Editor, add the section to a page and modify its settings to ensure all configurations work as expected.

6. Best Practices

Use descriptive labels and IDs for props to ensure clarity in the Theme Editor.
Keep the settings object structured and manageable by categorizing props when necessary.
Test your sections extensively in the editor for both usability and responsiveness.

Conclusion

That's how you can create and update sections in a theme on the Fynd Platform. In the next tutorial, we will explore integrating global settings and configurations for more dynamic themes. Stay tuned!

Setting Up a Theme Locally

Zaid Rehman — Fri, 27 Dec 2024 12:20:12 +0000

Introduction:

Welcome to the first tutorial in the Fynd Platform Theme Development series. In this session, we will cover how to set up a local development environment to create and customize themes. This tutorial includes installing tools, initializing a theme project, and previewing changes locally.

1. Prerequisites

Before starting, ensure you have the following:

Node.js: Install Node.js v16.19 or above.
FDK CLI: A command-line tool for managing themes on the Fynd Platform. NPM Github
A Fynd Partner Account: Access a development or live account in your partner organization introduction. Create an Account

2. Installing the FDK CLI

To install the FDK CLI:

npm install -g @gofynd/fdk-cli

Verify the installation:

fdk --version

If installation fails due to permission restrictions, use sudo or run as an administrator.

3. Authenticating Your Partner Account

fdk login

This opens a browser window where you can authenticate with your credentials. After logging in, you will see your partner organizations. Select the one where you want to create your theme.

Verify login:

fdk user

This will display your authenticated user details.

4. Initializing a Theme Project

Create a new theme project using the FDK CLI:

fdk theme new --name <theme-name>

This command generates a project folder containing the base theme code. Use the following commands to navigate to the project folder:

cd <theme-name>

Run fdk theme serve to preview the default theme.

5. Running the Local Development Server

Start the development server:

fdk theme serve

6. Understanding the Theme Structure

The theme code follows a React based architecture. The directory structure includes:

theme/pages/: Contains page templates (e.g., home, product).
theme/sections/: Reusable UI components.
theme/assets/: Static files such as images and fonts.

7. Editing and Previewing Changes

Modify theme files to customize the look and feel. For example, add a heading to the homepage:

Navigate to theme/pages/home.jsx.
Insert the following code snippet:

<h1>Welcome to My Custom Theme</h1>

Save the file, and the changes will automatically reflect in the local preview.

8. Syncing Your Theme

After testing locally, sync your theme to the Fynd Platform:

fdk theme sync

Visit the Theme Panel on the platform to apply and preview your changes in the live environment.

9. Best Practices

Always test thoroughly in the local environment before syncing.
Follow Fynd's guidelines to ensure compatibility with the platform and improve performance.

Conclusion:

You have now set up your local development environment for creating themes on the Fynd Platform. In the next tutorial, we’ll explore creating and updating sections to enhance your theme's functionality. See you there!

Stage 4: Nullish Coalescing Operator

Zaid Rehman — Sun, 17 Oct 2021 14:58:30 +0000

Motivation
When performing property accesses, it is often desired to provide a default value if the result of that property access is null or undefined. At present, a typical way to express this intent in JavaScript is by using the || operator.

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings.undefinedValue || 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue || 'some other default'; // result: 'some other default'

This works well for the common case of null and undefined values, but there are a number of falsy values that might produce surprising results:

const headerText = response.settings.headerText || 'Hello, world!'; // Potentially unintended. '' is falsy, result: 'Hello, world!'
const animationDuration = response.settings.animationDuration || 300; // Potentially unintended. 0 is falsy, result: 300
const showSplashScreen = response.settings.showSplashScreen || true; // Potentially unintended. false is falsy, result: true

The nullary coalescing operator is intended to handle these cases better and serves as an equality check against nullary values (null or undefined).

Syntax
Base case. If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.

const response = {
  settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
  }
};

const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

Specification

https://tc39.github.io/proposal-nullish-coalescing/

Stage 4: Optional chaining

Zaid Rehman — Sun, 17 Oct 2021 14:58:19 +0000

Motivation
When looking for a property value that's deep in a tree-like structure, one often has to check whether intermediate nodes exist or not like below

const street = user.address && user.address.street;

Also, many API return either an object or null/undefined, and one may want to extract a property from the result only when it is not null

const fooInput = myForm.querySelector('input[name=foo]')
const fooValue = fooInput ? fooInput.value : undefined

The Optional Chaining Operator allows a developer to handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables:

var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value

The call variant of Optional Chaining is useful for dealing with interfaces that have optional methods

iterator.return?.() // manually close an iterator

or with methods not universally implemented

if (myForm.checkValidity?.() === false) { // skip the test in older web browsers
    // form validation fails
    return;
}

Syntax
The Optional Chaining operator is spelled ?.. It may appear in three positions:

obj?.prop       // optional static property access
obj?.[expr]     // optional dynamic property access
func?.(...args) // optional function or method call

Semantics
If the operand at the left-hand side of the ?. operator evaluates to undefined or null, the expression evaluates to undefined. Otherwise the targeted property access, method or function call is triggered normally.

a?.b                          // undefined if `a` is null/undefined, `a.b` otherwise.
a == null ? undefined : a.b

a?.[x]                        // undefined if `a` is null/undefined, `a[x]` otherwise.
a == null ? undefined : a[x]

a?.b()                        // undefined if `a` is null/undefined
a == null ? undefined : a.b() // throws a TypeError if `a.b` is not a function
                              // otherwise, evaluates to `a.b()`

a?.()                        // undefined if `a` is null/undefined
a == null ? undefined : a()  // throws a TypeError if `a` is neither null/undefined, nor a function
                             // invokes the function `a` otherwise

Short-circuiting

a?.[++x]         // `x` is incremented if and only if `a` is not null/undefined
a == null ? undefined : a[++x]

Stacking

a?.b[3].c?.(x).d
a == null ? undefined : a.b[3].c == null ? undefined : a.b[3].c(x).d
// (as always, except that `a` and `a.b[3].c` are evaluated only once)

Optional deletion

delete a?.b
a == null ? true : delete a.b

Stage 2: Record and Tuples

Zaid Rehman — Sun, 17 Oct 2021 14:58:09 +0000

Record (Analogous to objects) and Tuple (Analogous to arrays) are the new types that are coming soon in JavaScript.

Syntax
Notice the # before curly braces or square bracket. This is the Syntactical difference between objects/arrays and records/tuples.

const record = #{
    foo: "FOO",
    bar: "BAR"
};
const tuple = #["FOO", "BAR"]

Deep Immutability
Record and Tuple are deeply immutable, unlike Object.freeze. The value of a record/tuple or the values inside nested record/tuples cannot be changed once it is defined.

const record = #{
    foo: "FOO",
    bar: "BAR",
    foobar: #["FOO", "BAR"]
};
const tuple = #["FOO", "BAR", #{foo: "FOO", bar: "BAR"}]

record.foo = "BAR" // Error
record.foobar[0] = "BAR" // Error
tuple[0] = "BAR" // Error
tuple[2].foo = "BAR" // Error

Deep Equality
IMO this is the best feature of record/tuple. In objects and arrays, you can only compare by their reference but in a record or a tuple, you can compare by its values. It is also possible to compare values of nested record/tuple

const record2 = #{foo: "FOO", bar: "BAR", foobar: #["FOO", "BAR"]}
const tuple2 = #["FOO", "BAR", #{foo: "FOO", bar: "BAR"}]

record.foobar === #["FOO", "BAR"] // true
tuple[2] ===  #{foo: "FOO", bar: "BAR"} // true

record === record2 // true
tuple === tuple2 // true

Features same as Object/Array
You can use them just like you use objects and arrays.
Computed property names, shorthand notation, spread operator, Destructuring, rest operator.

const f = "foo"
const bar = "BAR"
const values = #{a: 1, b: 2}

const record = #{
    [f]: "FOO",     // Computed property names
    bar,            // Short hand notation
    ...values       // Spread operator
};

console.log(record.foo == "FOO") // true
console.log(record.bar == "BAR") // true
console.log(record.a == 1) // true
console.log(record.b == 2) // true

const { foo: destructedFOO, ...rest } = record //  Destructuring and rest operator

console.log(destructedFOO == "FOO") // true
console.log(rest.a == 1) // true
console.log(rest.b == 2) // true
console.log(rest.bar == "BAR") // true

Limitations
Cannot use Record and Tuples on lhs while destructuring, symbol key not supported in the record, the nested Object/Array/Class can not be converted to record.

// Using a record or tuple literal on the lhs is a SyntaxError
const #{ a, b } = #{ a: 1, b: 2 } // SyntaxError
const #[a, b] = #[1, 2] // SyntaxError

// Record and Tuples only support primitive data types 
const record = #{ instance: new SomeClass()} //Error
const record = #{ object: { a: 1}} //Error
const tuples = #[new SomeClass()] // Error
const tuples = #[1, [2]] // Error

// Records can only have String keys, not Symbol keys
const record = #{ [Symbol()]: #{} }; //Error

Stage 3: Temporal

Zaid Rehman — Sun, 17 Oct 2021 14:57:58 +0000

Provides new standard objects and functions for working with dates and times, solving all previous issues with Date.

Date has been a long-standing pain point in ECMAScript. Temporal, is a global Object that acts as a top-level namespace (like Math), that brings a modern date/time API to the ECMAScript language.
For a detailed look at some of the problems with Date, and the motivations for Temporal, see: Fixing JavaScript Date.

Temporal fixes these problems by:

Providing easy-to-use APIs for date and time computations
First-class support for all time zones, including DST-safe arithmetic
Dealing only with objects representing fixed dates and times
Parsing a strictly specified string format
Supporting non-Gregorian calendars

Object Relationship

Code examples

Temporal.Now

Temporal.Now.instant() - get the exact time since Unix epoch
Temporal.Now.timeZone() - get the current system time zone

Temporal.Instant

const instant = Temporal.Instant.from('1969-07-20T20:17Z');
instant.toString();  // => '1969-07-20T20:17:00Z'
instant.epochMilliseconds;  // => -14182980000

Temporal.PlainDate

const date = Temporal.PlainDate.from({ year:  2006, month:  8, day:  24  });  // => 2006-08-24 
date.year;  // => 2006 
date.inLeapYear;  // => false 
date.toString();  // => '2006-08-24'

Cookbook
https://tc39.es/proposal-temporal/docs/cookbook.html

Polyfills
https://www.npmjs.com/package/@js-temporal/polyfill

Stage 3: Array find from last

Zaid Rehman — Sun, 10 Oct 2021 15:32:36 +0000

Proposal for the .findLast() and .findLastIndex() methods on array and typed array.

Motivation
Finding an element in an array is a very common programming pattern.
It can improve performance by avoiding obvious overhead and improve the constant factors in the time complexity. It can be useful in some performance-sensitive scenarios. eg: React render function.

Core Feature
Adds Array.prototype.findLast and Array.prototype.findLastIndex.

This would behave the same as Array.prototype.find and Array.prototype.findIndex but would iterate from the last to the first.

Code examples

const array = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

array.find(n => n.value % 2 === 1); // { value: 1 }
array.findIndex(n => n.value % 2 === 1); // 0

// ======== Before the proposal =========== 

// find
[...array].reverse().find(n => n.value % 2 === 1); // { value: 3 }

// findIndex
array.length - 1 - [...array].reverse().findIndex(n => n.value % 2 === 1); // 2
array.length - 1 - [...array].reverse().findIndex(n => n.value === 42); // should be -1, but 4

// ======== In the proposal =========== 

// find
array.findLast(n => n.value % 2 === 1); // { value: 3 }

// findIndex
array.findLastIndex(n => n.value % 2 === 1); // 2
array.findLastIndex(n => n.value === 42); // -1

Polyfills
https://github.com/zloirock/core-js#array-find-from-last

Forem: Zaid Rehman

Why 0.1 + 0.2 0.3 in JavaScript: The Truth About Floating-Point Numbers

Why 0.1 + 0.2 ≠ 0.3 in JavaScript

🧮 What’s Going On?

💡 The Science Behind It

⚠️ Why It Matters

❌ Don’t do this:

✅ Do this instead:

💰 When You Need Perfect Precision

🧠 Key Takeaways

🔍 TL;DR

Custom Pages: Uses and Creation

Introduction:

1. What Are Custom Pages?

2. Directory Structure for Custom Pages

3. Creating a Custom Page

4. Registering Custom Pages

5. Adding Custom Pages to index.jsx

6. Fetching Data with serverFetch

7. Best Practices

8. Real-Life Use Cases

9. Benefits of Custom Pages

Conclusion:

System Page Understanding and Using Section Renderer

Introduction:

1. What Are System Pages?

2. Directory Structure

3. Home Page Example

4. Fetching Page Data Using pageDataResolver

5. Registering the Home Page and Resolver in index.jsx

6. Best Practices for Registration

7. Benefits of Dynamic Import and Resolver Integration

Conclusion:

Server-Side Rendering in Sections

Introduction:

1. What Is Server-Side Rendering?

2. Anatomy of a Section with severFetch

3. GraphQL Query for Product Data Official Documentation

4. Implementing serverFetch

5. Accessing Product Data Using useGlobalStore

6. Advanced Use Cases

7. Best Practices for serverFetch

Conclusion:

Using Blocks in Sections

Introduction:

1. What Are Blocks?

2. Anatomy of a Block

3. Using Blocks in a Section

4. Advanced Block Features

5. Real-Life Use Cases

Banner Section with Multiple Slides

Product Grid with Configurable Items

6. Best Practices

Conclusion:

Building and Customizing Sections

Setting Up a Theme Locally

Introduction:

1. Prerequisites

2. Installing the FDK CLI

3. Authenticating Your Partner Account

4. Initializing a Theme Project

5. Running the Local Development Server

6. Understanding the Theme Structure

7. Editing and Previewing Changes

8. Syncing Your Theme

9. Best Practices

Conclusion:

Stage 4: Nullish Coalescing Operator

Stage 4: Optional chaining

Stage 2: Record and Tuples

Stage 3: Temporal

Stage 3: Array find from last

Why `0.1 + 0.2` ≠ `0.3` in JavaScript

5. Adding Custom Pages to `index.jsx`

4. Fetching Page Data Using `pageDataResolver`

5. Registering the Home Page and Resolver in `index.jsx`