Forem: Shlomi Sela

Mastering Flow-Relative CSS for Internationalization: A Deep Dive

Shlomi Sela — Wed, 31 Jan 2024 10:52:10 +0000

The world of web development is continuously evolving, and a significant part of this evolution is the shift towards more inclusive and flexible design practices. Flow-relative CSS, rooted in the CSS Logical Properties and Values Level 1, is at the forefront of this shift, offering a more adaptable approach to handling text directionality in web design.

Introduction

Traditionally, CSS has been heavily reliant on physical direction properties (like margin-left or margin-right) which are inherently tied to the layout direction. This approach poses challenges in internationalization, especially when designing for languages that use right-to-left (RTL) scripts like Arabic or Hebrew. Flow-relative properties, such as margin-inline-start and padding-inline-end, offer a solution by abstracting the directionality, making styles adaptable to both LTR and RTL layouts without the need for redundant code.

Understanding Flow-Relative Properties

Flow-relative CSS properties are based on the flow of the content rather than the physical dimensions of the screen. They are divided into two categories:

Inline Properties: These relate to the layout in the inline direction (left-to-right in LTR scripts, right-to-left in RTL scripts). Examples include margin-inline-start and padding-inline-end.
Block Properties: These apply in the block direction (top-to-bottom in most scripts). Examples include margin-block-start and margin-block-end. The key advantage here is the abstraction of layout direction, making your CSS more flexible and context-aware.

Advantages of Flow-Relative CSS

Enhanced Internationalization

Flow-relative properties automatically adjust to the writing mode, significantly simplifying the creation of layouts that work seamlessly in both LTR and RTL contexts. This is invaluable for websites that aim for a global audience.

Code Efficiency and Maintenance

By using Flow-Relative properties, you can significantly reduce the duplication of style rules for LTR and RTL layouts, leading to a cleaner, more maintainable codebase.

Flexibility and Scalability

These properties make your stylesheets more adaptable and ready for a variety of languages and scripts, supporting the global nature of the web.

Implementing Flow-Relative Properties

Let's explore how to implement these properties in practice. Consider a scenario where you need to apply a margin to the start of an element:

/* Traditional Approach */
.ltr .example {
  margin-left: 1.25rem; /* Left margin for LTR */
}
.rtl .example {
  margin-right: 1.25rem; /* Right margin for RTL */
}

/* Flow-Relative Approach */
.example {
  margin-inline-start: 1.25rem; /* Start margin for both LTR and RTL */
}

In the Flow-Relative approach, margin-inline-start intelligently applies the margin to the start of the element, irrespective of the text direction.

Complex Layouts and Responsive Design

In more complex and responsive layouts, Flow-Relative properties can be combined with media queries and other responsive design techniques. This ensures that your layouts remain adaptable and responsive, not just to screen sizes but also to different writing modes.

Challenges and Solutions

Transitioning to Flow-Relative CSS might require some initial adjustment, particularly if you're used to thinking in terms of physical directions. However, the benefits in terms of internationalization and maintainability are well worth the effort. Start by experimenting with these properties in smaller modules or components, gradually integrating them into your broader styling practices.

Conclusion

Flow-relative CSS is more than just a set of new properties; it represents a paradigm shift in CSS toward more inclusive and adaptable web design. By embracing these properties, developers can create websites that are truly global and accessible, without compromising on efficiency or maintainability.

Simplifying Data Fetching in React with SWR: A Quick Guide

Shlomi Sela — Mon, 01 Jan 2024 07:51:10 +0000

Modern React applications often require real-time data fetching, caching, and synchronization, which can be challenging. SWR, developed by Vercel, simplifies this process significantly. This article explores how to harness the power of SWR to improve data fetching in React.

Introduction

Fetching data in React applications can be complex, involving managing states for loading, data, and errors. SWR (Stale-While-Revalidate) provides a streamlined approach to handle these concerns elegantly.

What is SWR?

SWR is a React Hooks library for data fetching. The name derives from the HTTP cache invalidation strategy (stale-while-revalidate) which effectively means "serve the stale (old) data until you get a chance to validate (fetch the latest data)."

Key Features of SWR

SWR brings several advantages:

Built-in Cache and State Management: Automatically caches fetched data and manages the loading and error states.
Real-time Experience: Offers features like automatic revalidation on focus, network recovery, and interval polling.
Lightweight and Flexible: Easy to integrate and use in existing projects with minimal configuration.

Getting Started with SWR

To start using SWR, first install it:

npm install swr

Then, you can use the useSWR hook to fetch data:

import useSWR from 'swr';

const fetcher = url => fetch(url).then(res => res.json());

function UserProfile({ userId }) {
  const { data, error } = useSWR(`/api/user/${userId}`, fetcher);

  // Handle loading and error states
}

Advanced Usage

SWR also supports more advanced features like:

Conditional Fetching: Only fetch data when certain conditions are met.
Dependent Fetching: Chain requests and fetches data only after certain data is available.
Global Configuration: Customize SWR's behavior globally in your application.

Real-World Scenarios

In a complex application, SWR can simplify data management. For example, in a dashboard application, SWR can handle multiple API requests, cache the data, and refresh it periodically, ensuring the user always sees up-to-date information.

Best Practices and Performance Optimization

To maximize the benefits of SWR:

Optimize Fetcher Functions: Ensure your fetcher function is optimized and handles errors gracefully.
Manage Cache Properly: Utilize SWR's cache management features to synchronize data across components.

Conclusion

SWR offers a modern solution to the challenges of data fetching in React. It ensures efficient data management, leading to cleaner code and a better user experience.

Further Resources

For more information, check out:

Mastering React with SOLID Principles: A Practical Guide

Shlomi Sela — Wed, 27 Dec 2023 12:29:38 +0000

React's component-based architecture makes it an excellent framework to apply SOLID principles.
These principles enhance scalability, maintainability, and robustness in applications.
This article focuses on implementing SOLID principles in React, specifically using hooks.

Introduction

SOLID principles are crucial for creating high-quality code. They make your code extendable, logical, and easier to understand, which is especially beneficial in a flexible framework like React.

S - Single Responsibility Principle (SRP)

Principle: A component should have one, and only one, reason to change.

Example:
Create functional components that handle a single functionality. For example, a UserList component should solely display users, not fetch user data.

const UserList = ({ users }) => (
  <ul>
    {users.map(user => <li key={user.id}>{user.name}</li>)}
  </ul>
);

O - Open/Closed Principle

Principle: Components should be open for extension but closed for modification.

Example: Utilize custom hooks to add functionality to a component without altering its core logic.

const useUserData = () => {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // Fetch and set user data
  }, []);

  return userData;
};

const UserProfile = () => {
  const userData = useUserData();
  return <div>{userData.name}</div>;
};

L - Liskov Substitution Principle (LSP)

Principle: Components should be replaceable with their subtypes.

Example: Design components that can accept varying props but maintain the same interface.

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

const LinkButton = ({ href, children }) => (
  <a href={href}>{children}</a>
);

I - Interface Segregation Principle (ISP)

Principle: Components should not be forced to depend on interfaces they do not use.

Example: Create smaller, focused components instead of large, complex ones.

const UserName = ({ user }) => (<div>{user.name}</div>);
const UserPosts = ({ posts }) => (<div>{/* Post list */}</div>);

D - Dependency Inversion Principle (DIP)

Principle: Depend on abstractions, not on concretions.

*Example: Employ context API to manage dependencies, keeping components decoupled.
*

const UserContext = React.createContext();

const UserProfile = () => {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
};

<UserContext.Provider value={currentUser}>
  <UserProfile />
</UserContext.Provider>

Conclusion

Implementing SOLID principles with React hooks leads to more efficient, maintainable, and scalable code. These practices set a strong foundation for building robust React applications.

Unlocking Performance with Concurrent Rendering in React 18

Shlomi Sela — Tue, 19 Dec 2023 17:25:20 +0000

React 18 introduces an exciting new feature: Concurrent Rendering. This article takes a deep dive into what Concurrent Rendering is, its benefits, and how it represents a significant shift from the traditional synchronous rendering approach in React.

Introduction

Concurrent Rendering is a powerful feature in React 18 that allows for multiple rendering tasks to happen without blocking the user interface. This marks a significant improvement in the way React handles rendering, leading to smoother user experiences and better application performance.

What is Concurrent Rendering?

Concurrent Rendering in React 18 enables the rendering of multiple elements in the background, at their own pace, without blocking the main thread. This means React can prepare new views in the background, interrupt rendering if higher-priority updates come in, and efficiently update the UI.

Benefits of Concurrent Rendering

Improved User Experience: By reducing the time spent on blocking the main thread, Concurrent Rendering ensures smoother interactions.
Enhanced Performance: It enables React to work on high-priority updates first, improving the perceived performance of your application.
Flexibility in Rendering: Developers have more control over the rendering process, allowing for optimizations based on user interactions and device capabilities.

Synchronous vs. Concurrent Rendering

In traditional synchronous rendering, React processes updates in a single, uninterrupted, blocking UI thread. This can lead to jankiness and unresponsive UI during complex updates. Concurrent Rendering, on the other hand, breaks this pattern by allowing non-urgent updates to be interrupted and resumed, leading to a smoother UI experience.

Practical Examples

Using Suspense with Concurrent Rendering

React 18 expands the capabilities of Suspense, making it a great tool to use with Concurrent Rendering.

const ProfilePage = () => {
  return (
    <React.Suspense fallback={<Spinner />}>
      <UserProfile />
    </React.Suspense>
  );
};

In this example, Suspense works with Concurrent Rendering to load the UserProfile component. If it’s not ready, the Spinner is shown as a fallback.

Prioritizing Updates with useTransition

React 18 introduces a new hook called useTransition that allows developers to prioritize updates. This is useful when you want to ensure that a high-priority update is rendered before a low-priority one.

const [isPending, startTransition] = useTransition();
const [mode, setMode] = useState('edit');

const updateProfile = () => {
  startTransition(() => {
    setMode('view');
  });
};

In this example, the startTransition is used to mark the profile update as a lower priority, allowing more urgent updates to take precedence.

Conclusion

Concurrent Rendering in React 18 is a game-changer, particularly for complex applications that require a high degree of interactivity. By understanding and leveraging this feature, developers can significantly enhance the performance and user experience of their React applications.

References

Advanced Hooks in React: Beyond useState and useEffect

Shlomi Sela — Tue, 12 Dec 2023 07:40:42 +0000

Exploring advanced React hooks is key for developers looking to create efficient and scalable applications. This article dives into these hooks, offering insights and practical code examples.

Introduction

React's Hooks API revolutionized functional components by providing a more intuitive way to handle state and side effects. Beyond the basics, advanced hooks offer nuanced control and optimization capabilities.

useReducer

useReducer is ideal for complex state logic, offering a more structured approach than useState.

Example:

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

useCallback

useCallback is critical for preventing unnecessary re-renders, especially with memoized components.

Example and Pitfall:

const MyComponent = React.memo(({ onClick }) => {
  // Component implementation
});

function ParentComponent() {
  const [value, setValue] = useState('');

  // Incorrect use of useCallback can lead to unnecessary re-renders
  const handleClick = useCallback(() => {
    console.log('Value:', value);
  }, []); // Missing dependency: value

  return <MyComponent onClick={handleClick} />;
}

In this example, MyComponent will re-render whenever value changes because handleClick is not correctly memoized due to a missing dependency.

useMemo

useMemo memoizes expensive calculations to optimize performance.

Example:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useRef

useRef is used for persisting values across renders and accessing DOM elements.

Example:

const inputEl = useRef(null);
const focusInput = () => inputEl.current && inputEl.current.focus();

useContext

useContext simplifies state management across components, making it easier to share data.

Example:

const value = useContext(MyContext);

// Example of a context provider
const MyContextProvider = ({ children }) => {
  const [value, setValue] = useState(initialValue);
  return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
}

Creating Custom Hooks

Custom hooks encapsulate logic and promote reusability.

Example: useFetch Hook:

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

(You can use any method instead of fetch.)

Conclusion

Mastering advanced hooks in React is crucial for creating efficient, clean, and maintainable applications.

Further Resources

React Best Practices for Front-End Developers

Shlomi Sela — Mon, 04 Dec 2023 14:19:27 +0000

React Best Practices for Front-End Developers

React, a vital tool in modern web development demands an organized approach for enhanced readability and maintainability. This guide, inspired by K. Thamodaran's insights and updated with current practices, will help you set up your React projects efficiently.

Short Introduction

Welcome to this guide on React Best Practices, tailored for Intermediate Developers, Advanced Beginners, and Early Career Professionals. If you're familiar with React's basics and looking to enhance your skills, this guide will help you understand key practices for efficient and professional React development. Let's elevate your React expertise together!

1. Folder Structure

Effective file organization is key. Consider this structure for clarity and ease of maintenance:

/components: For all React components.
- /ui: For UI-specific components like buttons, modals, and inputs.
/containers: For components that connect to Redux or any global state.
/contexts: For React context files.
/hooks: For custom React hooks.
/utils: For utility functions and helpers.
/assets: For static files like images and styles.

Example:

src/
|-- components/
|   |-- ui/
|   |-- [Other Component Folders]
|-- containers/
|-- contexts/
|-- hooks/
|-- utils/
|-- assets/

2. Component Structure

Aim for small, focused components. Each should address a specific functionality.

Example:

// SimpleButton.jsx
import React from 'react';

const SimpleButton = ({ onClick, label }) => (
  <button onClick={onClick}>{label}</button>
);

export default SimpleButton;

3. State Management

Use useState for local state and useContext for more global needs.

Example using useState and useContext:

// ThemeContext.js
import React, { createContext, useState } from 'react';

export const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

// ThemeToggleButton.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  return <button onClick={toggleTheme}>Switch to {theme === 'light' ? 'dark' : 'light'} mode</button>;
};

4. File Naming Conventions

Consistency is key. Use PascalCase for components and camelCase for utility functions and hooks.

Components: MyComponent.jsx
Utilities/Hooks: useMyHook.js, formatDate.js

5. Reusable Components

Strive for reusability in components to maximize efficiency and consistency across your application.

Example:

// InputField.jsx
import React from 'react';

const InputField = ({ type, placeholder, value, onChange }) => (
  <input type={type} placeholder={placeholder} value={value} onChange={onChange} />
);

export default InputField;

6. Testing

Regularly test components with tools like Jest and React Testing Library for reliability and ease of debugging.

7. Performance Optimization

Be mindful of performance. Use React.memo for functional components to prevent unnecessary re-renders.

8. Code Splitting

Employ code splitting with React.lazy and Suspense to improve load times.

By embracing these practices, your React projects will be more maintainable, scalable, and efficient. Always stay open to new patterns and improvements as React continues to evolve!

Forem: Shlomi Sela

Mastering Flow-Relative CSS for Internationalization: A Deep Dive

Introduction

Understanding Flow-Relative Properties

Advantages of Flow-Relative CSS

Enhanced Internationalization

Code Efficiency and Maintenance

Flexibility and Scalability

Implementing Flow-Relative Properties

Complex Layouts and Responsive Design

Challenges and Solutions

Conclusion

Further Reading

Simplifying Data Fetching in React with SWR: A Quick Guide

Introduction

What is SWR?

Key Features of SWR

Getting Started with SWR

Advanced Usage

Real-World Scenarios

Best Practices and Performance Optimization

Conclusion

Further Resources

Mastering React with SOLID Principles: A Practical Guide

Introduction

S - Single Responsibility Principle (SRP)

O - Open/Closed Principle

L - Liskov Substitution Principle (LSP)

I - Interface Segregation Principle (ISP)

D - Dependency Inversion Principle (DIP)

Conclusion

Further Reading and Resources

Unlocking Performance with Concurrent Rendering in React 18

Introduction

What is Concurrent Rendering?

Benefits of Concurrent Rendering

Synchronous vs. Concurrent Rendering

Practical Examples

Using Suspense with Concurrent Rendering

Prioritizing Updates with useTransition

Conclusion

References

Advanced Hooks in React: Beyond useState and useEffect

Introduction

useReducer

useCallback

useMemo

useRef

useContext

Creating Custom Hooks

Conclusion

Further Resources

React Best Practices for Front-End Developers

React Best Practices for Front-End Developers

Short Introduction

1. Folder Structure

2. Component Structure

3. State Management

4. File Naming Conventions

5. Reusable Components

6. Testing

7. Performance Optimization

8. Code Splitting