Upskilling in React Native, especially with experience in Flutter, iOS, or Android, can be effectively achieved by leveraging your knowledge of mobile development. Here’s a step-by-step guide to help you get started and progress quickly.

To rapidly upskill in React Native, focus on solidifying your JavaScript fundamentals, actively practice building small projects, leverage online learning platforms with hands-on exercises, dive into key React Native concepts like components, state management, navigation, and API integration, and actively engage with the community to learn from others and solve problems efficiently.

Understand the Basics of React Native

• What to Focus On: Learn about React Native’s architecture, JSX syntax, and how it builds upon React.
• Resources:
  • Introduction
  • Tutorial

Set Up the Development Environment

• Follow the React Native setup guide for your platform.
• Install and configure:
  • Node.js and npm (or yarn)
  • Android Studio and Xcode for emulators
  • Expo CLI for a simpler development experience.
• Resources:
  • Get Started with React Native

Core Concepts to Master

• React Basics: Props, State, and Lifecycle Methods.
  • Equivalent to managing state and widgets in Flutter.
• Components: Learn about core React Native components (View, Text, Image, etc.).
• Flexbox Layout: React Native relies heavily on Flexbox for UI layout (similar to Row and Column in Flutter).
• Navigation: Learn React Navigation (equivalent to Navigator in Flutter).
• Resources:
  • Navigation
  • Layout with FlexBox 

Learn React Native-Specific Features

• Native Modules and APIs: Interact with device hardware (camera, location, etc.).
• Styling: React Native uses JavaScript for styling (similar to CSS).
• Animation: Learn libraries like react-native-reanimated or Animated.
• State Management:
  • Start with Context API and React Hooks.
  • Gradually move to advanced solutions like Redux or MobX.
• Resources:
  • React Native Styles
  • Start Redux

Work on a Project

• Start with a small project to apply concepts:

• • Example 1: Build a To-Do app.
  • Example 2: Create a weather app using an open API.
• Tips:
  • Start simple and gradually add complexity (e.g., navigation, API integration).
  • Use tools like Expo for faster development.
• Resources:
  • React Native

Compare React Native and Flutter

• Similarities:
  • Both offer hot reload.
  • Component-based architecture.
• Differences:
  • React Native uses JavaScript or TypeScript, while Flutter uses Dart.
  • React Native relies on native components, while Flutter uses a custom rendering engine.
• Focus on understanding these differences to avoid confusion during development.

Dive Into Advanced Topics

• Native Development: Learn how to React Native bridges JavaScript with native code (iOS/Android).
• Performance Optimization: Study techniques to enhance performance (e.g., using FlatList for lists).
• Code Sharing: Explore more repos or code-sharing patterns if you maintain Flutter and React Native apps.
• Resources:
  • React Native Performance Overview

Practice with Open Source Projects

• Contribute to open-source projects to gain hands-on experience.
• Explore repositories on GitHub tagged with React Native.
• Resources:
  • 15 React Native Sample Projects

Use Online Learning Platforms

• Enroll in React Native-specific courses:
  • Udemy
  • Pluralsight
  • Frontend Masters
• Watch YouTube tutorials for real-world projects.

Network and Stay Updated

• Join React Native communities and forums:
  • Reactiflux Discord
  • React Native Reddit
• Follow blogs and changelogs to stay updated with the latest features.

Sample Roadmap for 1 Month

1. Week 1: Basics – Set up, understand JSX, and learn components.
2. Week 2: Intermediate – Navigation, API calls, and state management.
3. Week 3: Advanced – Native modules, animations, and performance optimization.
4. Week 4: Project – Build a small but complete app.

Final Thoughts on Upskilling in React Native

React Native not only enables you to create high-performance, cross-platform apps but also opens doors to diverse opportunities in the tech industry. With dedication, hands-on practice, and community support, you’ll soon become proficient and confident in delivering impactful mobile solutions.

In this blog post, I will share my journey of developing a Python-based solution to remove strikethrough text from PDFs. This solution is specifically designed for PDFs where strikethrough is applied as a style rather than an annotation.

The Challenge

Strikethrough text in PDFs can be tricky to handle, mainly when applied as a style. Standard PDF manipulation libraries often fall short in these cases. Determined to find a solution, I leveraged Python to create a practical approach.

The Solution

The solution involves three main steps: converting the PDF to a DOCX file, removing the strikethrough text from the DOCX file, and converting the modified DOCX file back to a PDF.

Dependencies

Before diving into the code, install the necessary Python dependencies. You will need:
• pdf2docx for converting PDF to DOCX
• python-docx for manipulating DOCX files
• docx2pdf for converting DOCX back to PDF

You can install these dependencies using pip:

pip install pdf2docx python-docx docx2pdf

Step-by-Step Guide to Remove Strikethrough Text from PDFs

Step 1: Convert PDF to DOCX

The first step is to convert the PDF file to a DOCX file. This allows us to manipulate the text more easily. We use the pdf2docx library for this conversion. Here is the code for the conversion function:

from pdf2docx import Converter
def convert_pdf_to_word(pdf_file, docx_file):
    """Convert PDF to DOCX format."""
    try:
        cv = Converter(pdf_file)
        cv.convert(docx_file, start=0, end=None)
        cv.close()
        print(f"Converted PDF to DOCX: {pdf_file} -> {docx_file}")
    except Exception as e:
        print(f"Error during PDF to DOCX conversion: {e}")
        sys.exit(1)

In this function, we create an instance of the Converter class, passing the pdf_file as an argument. The convert method of the Converter class is called to perform the conversion, and the close method is called to release any resources the converter uses. If the conversion is successful, a message is printed indicating the conversion. If an error occurs, an exception is caught, and an error message is printed.

Step 2: Remove Strikethrough Text

Once we have the DOCX file, we can remove the strikethrough text. This step involves iterating through the paragraphs and runs in the DOCX file and checking for the strikethrough style. We use the python-docx library for this task. Here is the code for the strikethrough removal function:

from docx import Document
def remove_strikethrough_text(docx_file):
    """Remove all strikethrough text from a DOCX file."""
    try:
        document = Document(docx_file)
        modified = False
        for paragraph in document.paragraphs:
            for run in paragraph.runs:
                if run.font.strike:
                    print(f"Removing strikethrough text: {run.text}")
                    run.text = ''
                    modified = True
        if modified:
            modified_docx_file = docx_file.replace('.docx', '_modified.docx')
            document.save(modified_docx_file)
            print(f"Strikethrough text removed. Saved to: {modified_docx_file}")
            return modified_docx_file
        else:
            print("No strikethrough text found.")
            return docx_file
    except Exception as e:
        print(f"Error during strikethrough text removal: {e}")
        sys.exit(1)

In this function, we create an instance of the Document class, passing the docx_file as an argument. We iterate through each paragraph in the document and then through each run within the section. If the strike attribute of the run’s font is True, we print a message indicating removing the strikethrough text and set the run’s text to an empty string. If strikethrough text was removed, we save the modified document to a new file with _modified appended to the original filename. If no strikethrough text was found, we return the original DOCX file.

Step 3: Convert DOCX Back to PDF

The final step is to convert the modified DOCX file back to a PDF file. This ensures that the strikethrough text is removed in the final PDF. We use the docx2pdf library for this conversion. Here is the code for the conversion function:

from docx2pdf import convert

def convert_docx_to_pdf(docx_file, output_pdf):
    """Convert DOCX back to PDF format."""
    try:
        convert(docx_file, output_pdf)
        print(f"Converted DOCX to PDF: {docx_file} -> {output_pdf}")
    except Exception as e:
        print(f"Error during DOCX to PDF conversion: {e}")
        sys.exit(1)

We call this function the convert function, passing the docx_file and output_pdf as arguments to perform the conversion. If the conversion is successful, a message is printed indicating the conversion. If an error occurs, an exception is caught, and an error message is printed.

Main Execution Block

The following block of code is the main execution section of the script. It starts by checking if the script is being run directly. It then verifies that the correct number of command-line arguments is provided and that the specified PDF file exists. If these conditions are met, the script defines intermediate file paths and performs the three main steps: converting the PDF to a DOCX file, removing strikethrough text from the DOCX file, and converting the modified DOCX back to a PDF. After completing these steps, it prints the location of the modified PDF file and cleans up any intermediate files. If errors occur during execution, they are caught and printed, and the script exits gracefully.

if __name__ == "__main__":
    if len(sys.argv) != 2:
        sys.exit(1)

    pdf_file = sys.argv[1]

    if not os.path.exists(pdf_file):
        print(f"Error: File not found - {pdf_file}")
        sys.exit(1)

    try:
        # Define intermediate file paths
        base_name = os.path.splitext(pdf_file)[0]
        temp_docx_file = f"{base_name}.docx"
        modified_docx_file = f"{base_name}_modified.docx"
        output_pdf_file = f"{base_name}_modified.pdf"

        # Step 1: Convert PDF to DOCX
        convert_pdf_to_word(pdf_file, temp_docx_file)

        # Step 2: Remove strikethrough text
        final_docx_file = remove_strikethrough_text(temp_docx_file)

        # Step 3: Convert modified DOCX back to PDF
        convert_docx_to_pdf(final_docx_file, output_pdf_file)

        print(f"Modified PDF saved to: {output_pdf_file}")

        # Clean up intermediate DOCX files
        if os.path.exists(temp_docx_file):
            os.remove(temp_docx_file)
        if final_docx_file != temp_docx_file and os.path.exists(final_docx_file):
            os.remove(final_docx_file)

    except Exception as e:
        print(f"Error: {e}")
        sys.exit(1)

Complete Script

import sys
import os
from pdf2docx import Converter
from docx import Document
from docx2pdf import convert

def convert_pdf_to_word(pdf_file, docx_file):
    """Convert PDF to DOCX format."""
    try:
        cv = Converter(pdf_file)
        cv.convert(docx_file, start=0, end=None)
        cv.close()
        print(f"Converted PDF to DOCX: {pdf_file} -> {docx_file}")
    except Exception as e:
        print(f"Error during PDF to DOCX conversion: {e}")
        sys.exit(1)

def remove_strikethrough_text(docx_file):
    """Remove all strikethrough text from a DOCX file."""
    try:
        document = Document(docx_file)
        modified = False

        for paragraph in document.paragraphs:
            for run in paragraph.runs:
                if run.font.strike:
                    print(f"Removing strikethrough text: {run.text}")
                    run.text = ''
                    modified = True

        if modified:
            modified_docx_file = docx_file.replace('.docx', '_modified.docx')
            document.save(modified_docx_file)
            print(f"Strikethrough text removed. Saved to: {modified_docx_file}")
            return modified_docx_file
        else:
            print("No strikethrough text found.")
            return docx_file
    except Exception as e:
        print(f"Error during strikethrough text removal: {e}")
        sys.exit(1)

def convert_docx_to_pdf(docx_file, output_pdf):
    """Convert DOCX back to PDF format."""
    try:
        convert(docx_file, output_pdf)
        print(f"Converted DOCX to PDF: {docx_file} -> {output_pdf}")
    except Exception as e:
        print(f"Error during DOCX to PDF conversion: {e}")
        sys.exit(1)

if __name__ == "__main__":
    if len(sys.argv) != 2:
        sys.exit(1)

    pdf_file = sys.argv[1]

    if not os.path.exists(pdf_file):
        print(f"Error: File not found - {pdf_file}")
        sys.exit(1)

    try:
        # Define intermediate file paths
        base_name = os.path.splitext(pdf_file)[0]
        temp_docx_file = f"{base_name}.docx"
        modified_docx_file = f"{base_name}_modified.docx"
        output_pdf_file = f"{base_name}_modified.pdf"

        # Step 1: Convert PDF to DOCX
        convert_pdf_to_word(pdf_file, temp_docx_file)

        # Step 2: Remove strikethrough text
        final_docx_file = remove_strikethrough_text(temp_docx_file)

        # Step 3: Convert modified DOCX back to PDF
        convert_docx_to_pdf(final_docx_file, output_pdf_file)

        print(f"Modified PDF saved to: {output_pdf_file}")

        # Clean up intermediate DOCX files
        if os.path.exists(temp_docx_file):
            os.remove(temp_docx_file)
        if final_docx_file != temp_docx_file and os.path.exists(final_docx_file):
            os.remove(final_docx_file)

    except Exception as e:
        print(f"Error: {e}")
        sys.exit(1)

Run the Script

Execute the script by running the following command, replacing it with the path to your PDF file:

python <script_name>.py <pdf_file_path>

This Python-based solution effectively removes strikethrough text from PDFs by leveraging the strengths of the pdf2docx, python-docx, and docx2pdf libraries. By converting the PDF to DOCX, modifying the DOCX, and converting it back to PDF, we can ensure that the strikethrough text is removed without affecting other content. This approach provides a robust and efficient method for handling strikethrough text in PDFs, making your documents clean and professional.

Debugging and Error Handling in VBA

After setting up VBA in Excel, you can start automating tasks and creating your macros. This blog will guide you through what comes next after the setup process—writing, running, and debugging VBA code in Excel.

Debugging and error handling are crucial for writing effective and reliable VBA (Visual Basic for Applications) code. It helps you identify issues and ensure your macros run smoothly. These practices ensure your code runs as intended and gracefully handles unexpected scenarios. In this blog, we’ll explore tools for debugging VBA code effectively and techniques for robust error handling, providing practical examples to make the concepts relatable and actionable.

Tools for Debugging VBA Code Effectively

1. Breakpoints: The First Line of Defense

Breakpoints allow you to pause code execution at specific lines, enabling you to inspect variable values and program flow. To set a breakpoint, click in the margin next to the code line or press F9. When the code execution stops, you can analyze what’s happening.

Breakpoint

Tip: Combine breakpoints with the Step-Into (F8) feature to execute the code line by line.

2. Immediate Window: Real-Time Debugging

The Immediate Window is a versatile tool where you can print variable values and test code snippets without running the entire program. Use Debug. Print to output values or messages to the Immediate Window.

Example:

Immediate window in VBA Editor

3. Locals Window and Watch Window: Inspect Variables

• Locals Window: Displays all variables in the current scope and their values.
• Watch Window: Allows you to monitor specific variables or expressions.

Local Window Watch Window in VBA editor

4. Error Highlighting and Debugging Features

VBA highlights syntax errors in red and runtime errors with a debug prompt. Clicking “Debug” during runtime errors highlights the problematic line for further inspection.

Example Error: Dividing by zero triggers a runtime error.

The highlighted error line of the code

Writing Robust Code with Error Handling Techniques

1. ‘On Error Resume Next’: Ignore and Proceed

This statement instructs VBA to ignore the error and move to the next line of code. Use it sparingly for non-critical errors.

Example:

Sub IgnoreError()
On Error Resume Next
Dim num As Integer
num = 10 / 0    'Error ignored
MsgBox "Code continues despite the error."
End Sub

You can explore more on error handling in VBA by reviewing the Microsoft VBA API Overview, which provides a comprehensive guide to error handling and other VBA concepts.

Conclusion

Once you’ve set up Excel VBA, you can start writing, debugging, and optimizing your macros. The next steps after setup are crucial for mastering VBA and making your Excel workflows more efficient. Keep practicing, and as you gain more experience, you’ll unlock the full potential of Excel automation.

One of Salesforce’s most important customization features is designing the interface to meet user needs. Tools such as Lightning Record Pages and Page Layouts serve similar purposes in shaping the user experience but have distinct differences. Let’s explore each one to understand its actions and when to use it.

What are Lightning Record Pages?

A Lightning Record Page is a customizable page layout used in Salesforce Lightning Experience. It’s designed to display detailed information about a specific record, such as an Account, Contact, Opportunity, etc. The layout consists of components like related lists, charts, reports, and other dynamic elements that can be placed anywhere on the page.

Key Features of Lightning Record Pages

• Customizable: You can design your own pages using Salesforce’s drag-and-drop tools.
• Component-Based: It allows you to add various pre-built or custom components, like lists, charts, and Lightning App Builder components, to enhance the page.
• User-Specific: Different layouts can be created for different user profiles, devices, or page types (like mobile or desktop).
• Multiple Views: You can create different layouts for different purposes or audiences within your organization.
• Dynamic and Flexible: Lightning Record Pages make it simple to organize sections and components, providing a dynamic user experience. Because of this adaptability, users can customize their view to meet their own requirements.

What are Page Layouts?

A Page Layout is the traditional method of controlling the arrangement of fields, buttons, and links on a record page. Page Layouts allow you to specify which fields are visible, read-only, or required for a particular record type. It’s primarily focused on structuring the form-like part of a record.

Key Features of Page Layouts

• Field Control: You can decide which fields appear and how they are arranged.
• Record Details: It includes fields, buttons, and related lists on the page, but it doesn’t include advanced components like charts.
• Standard Views: Page Layouts are generally more static compared to Lightning Record Pages.
• User Profiles: Different layouts can be assigned to different profiles, ensuring that users see the relevant data.

Key Differences Between Lightning Record Pages and Page Layouts

Feature	Lightning Record Pages	Page Layouts
Customization	Highly customizable with drag-and-drop components	Limited customization (mainly fields, buttons, and related lists)
Components	Can add dynamic components like charts, related lists, and custom components	Primarily focused on fields, buttons, and related lists
User Experience	Allows a more modern, dynamic user interface with customizable layouts based on device or user role	A more static, form-based interface that only focuses on fields
Visibility	Can customize visibility based on user profiles, devices, or record types	Controls field visibility based on user profiles
Device Compatibility	Mobile-friendly and responsive, with pages designed for both desktop and mobile	Desktop-based, although mobile users will see it too
Tool for Customization	Uses Lightning App Builder to customize the layout	Uses the standard Page Layout editor for customizing the fields and related lists
Purpose	Focuses on creating a richer user interface with more flexible layouts	Focuses on controlling which fields and sections are displayed on a record page

When to Use Lightning Record Pages vs. Page Layouts

• Use Lightning Record Pages when you want to create a dynamic, customizable user experience. If you need to add charts, reports, or other components that go beyond basic fields, Lightning Record Pages are the way to go. They offer a richer and more modern interface and can be tailored to meet specific user needs.
• Use Page Layouts to control which fields appear and how they are arranged on a record. This will ensure that users can quickly view or edit specific fields without worrying about advanced components.

Conclusion

In Salesforce, both Lightning Record Pages and Page Layouts are essential for creating customized user experiences, but they serve different purposes. Lightning Record Pages are more flexible and suited for modern, component-driven page designs, while Page Layouts focus on controlling the traditional data-entry form view. Understanding when and how to use each tool is key to creating the best possible Salesforce experience for your users.

I am always looking to write better, more performant and cleaner code. GitHub Copilot checks all the boxes and makes my life easier. I have been using it since the 2021 public beta, the hype is real!

According to the GitHub Copilot website, it is:

“The world’s most widely adopted AI developer tool.”  

While that sounds impressive, the proof is in the features that help the average developer produce higher quality code, faster. It doesn’t replace a human developer, but that is not the point. The name says it all, it’s a tool designed to work alongside developers. 

When we look at the stats, we see some very impressive numbers:

• 75% of developers report more satisfaction with their jobs 

• 90% of Fortune 100 companies use Copilot 

• With 55% of developers prefer Copilot 

• Developers report a 25% increase in speed 

Day in the Life

I primarily use Copilot for code completion and test cases for ReactJS and JavaScript code.

When typing predictable text such as “document” in a JavaScript file, Copilot will review the current file and public repositories to provide a context correct completion. This is helpful when I create new code or update existing code. Code suggestion via Copilot chat enables me to ask for possible solutions to a problem. “How do I type the output of this function in Typescript?”  

Additionally, it can explain existing code, “Explain lines 29-54.” Any developer out there should be able to see the value there. An example of this power comes from one of my colleagues: 

“Copilot’s getting better all the time. When I first started using it, maybe 10% of the time I’d be unable to use its suggestions because it didn’t make sense at all. The other day I had it refactor two classes by moving the static functions and some common logic into a static third class that the other two used, and it was pretty much correct, down to style. Took me maybe thirty seconds to figure out how to tell Copilot what to do and another thirty seconds for it to do the work.” 

Generally, developers dislike writing comments.  Worry not, Copilot can do that! In fact, I use it to write the first draft of every comment in my code.  Copilot goes a step further and writes user tests from the context of a file — “Write Jest tests for this file.”  

One of my favorite tools is “/fix” – which provides an attempt to resolve any errors in the code. This is not limited to errors visible in the IDE. Occasionally after compilation, there will be one or more errors. Asking Copilot to fix these errors is often successful, even though the error(s) may not visible. The enterprise version will even create commented pull requests! 

Although these features are amazing, there are methods to get the most out of it. You must be as specific as possible. This is most important when using code suggestions.

If I ask “I need this code to solve the problem created by the other functions” — I am not likely to get a helpful solution. However, if I ask “Using lines 10 – 150, and the following functions (a, b, and c) from file two, give me a solution that will solve the problem.”

It is key whenever possible, to break up the requests into small tasks. 

Copilot Wave 2 

The future of Copilot is exciting, indeed. While I have been talking about GitHub Copilot, the entire Microsoft universe is getting the “Copilot” treatment. In what Microsoft calls Copilot Wave 2, it is added to Microsoft 365.  

Wave 2 features include: 

• Python for Excel 

• Email prioritization in Outlook 

• Team Copilot 

• Better transcripts with the ability to ask Copilot a simple question as we would a co-worker, “What did I miss?”  

The most exciting new Copilot feature is Copilot Agents.  

“Agents are AI assistants designed to automate and execute business processes, working with or for humans. They range in capability from simple, prompt-and-response agents to agents that replace repetitive tasks to more advanced, fully autonomous agents.” 

With this functionality, the entire Microsoft ecosystem will benefit. Using agents, it would be possible to find information quickly in SharePoint across all the sites and other content areas. Agents can autonomously function and are not like chatbots. Chatbots work on a script, whereas Agents function with the full knowledge of an LLM. I.E. a service agent could provide documentation on the fly based on an English description of a problem. Or answer questions from a human with very human responses based on technical data or specifications. 

There is a new Copilot Studio, providing a low code solution allowing more people the ability to create agents. 

GitHub Copilot is continually updated as well. Since May, there is a private beta for Copilot extensions. This allows third-party vendors to utilize the natural language processing power of Copilot inside of GitHub, a major enhancement jumping Copilot to GPT-4o, and Copilot extensions which will provide customers the ability to use plugins and extensions to expand functionality. 

Conclusion

Using these features with Copilot, I save between 15-25% of my day writing code. Freeing me up for other tasks. I’m excited to see how Copilot Agents will evolve into new tools to increase developer productivity.

For more information about Perficient’s Mobile Solutions expertise, subscribe to our blog or contact our Mobile Solutions team today!

Applications that run smoothly across numerous platforms are in demand more than ever in today’s ever-changing technological landscape. Introducing Microsoft’s robust framework, .NET Multi-platform App UI ( .NET MAUI ), which makes it easier to create native desktop and mobile apps with a single codebase.

.NET MAUI: What is it?

.NET MAUI is an open-source framework that lets programmers use C# and XAML to create Windows, macOS, iOS, and Android applications. It functions as Xamarin’s evolution.forms, expanding its functionality from PC to mobile settings. You may simplify the development process and lessen the complexity of managing several codebases for various platforms by using. NET MAUI to maintain a single shared codebase. The latest .NET MAUI version is 9.

Essential Elements of .NET MAUI

• One Project Structure: Simplify project organization by managing resources, typefaces, pictures, and platform-specific code under a single project structure.
• Performance and Extensibility: Take advantage of improved performance thanks to redesigned user interface controls that are efficient and extensible.
• Native API Access: When required, directly access native platform APIs, giving you the freedom to incorporate platform-specific features.
• Hot Reload: To speed up the build-test-debug cycle, use XAML Hot Reload to view real-time UI changes while developing.

Getting Started With .NET MAUI

Before starting work with .NET MAUI, you need to meet the following requirements:

• Install Visual Studio 2022 (version 17.12 or above) with the.NET Multi-platform App UI workload.
• Operating System: Windows or macOS. It is important to note that developing apps for iOS and macOS requires a Mac.

After configuring your environment, open Visual Studio and create a new.NET MAUI project to begin developing your application. Microsoft provides detailed instructions for developing your first .NET MAUI application.

Why Should I Use.NET MAUI?

• Cross-Platform Development: Create your application code once and deploy it across various platforms, saving time and resources.
• Unified Development Experience: Use a consistent API across platforms to reduce the learning curve and boost productivity.
• Community and help: Take use of a thriving community and substantial documentation to ensure you receive the help you require throughout your development journey.

Conclusion

With its simplified and effective method for creating native applications for several platforms, .NET. MAUI is a significant breakthrough in cross-platform application development. Adopting .NET MAUI frees developers from the burden of maintaining distinct codebases for every platform, allowing them to concentrate on crafting engaging user experiences.

Go to Microsoft’s .NET MAUI page for official documentation and additional in-depth details.
Learn with Microsoft: https://learn.microsoft.com/en-us/dotnet/maui/what-is-maui?view=net-maui-9.0

In the previous blog, Part 1: Sitecore Quick Guide for the Beginner, we covered essential Sitecore topics, including what Sitecore is, its key features, SXA, templates and their types, Standard Values, Helix and Habitat, and how Sitecore interacts with its SQL database. We also introduced important tools like the Content Editor and explained how Sitecore handles content management and delivery.

In this blog, we’ll continue exploring more important topics to help you gain a deeper understanding of how Sitecore works. Let’s dive into the next set of Sitecore concepts…

1. What is CMS (Content Management System) in Sitecore?

Sitecore CMS (Content Management System) is a platform that helps you create, publish, and manage content on your website. It makes it easy to create and update digital content, improving the experience for your users. A CMS is a tool that allows teams to work together to create, edit, and publish digital content like web pages and blogs.

2. What is Versioning in Sitecore?

In Sitecore, versioning lets you create multiple versions of any item, including different languages or variations. Using the Content Editor or Experience Editor, you can create as many versions as needed. There are two types of versions:

1. Numbered versions: These are versions of the item in the same language. For example, you might create a special version of your product page for a promotion, including a new image, and then switch it back after the promotion ends.
2. Language versions: These are versions of the item in different languages. For example, you can add an English version of a page and also create a French version. You would also need to create separate versions of any images to show in both languages.

3. Rendering in Sitecore.

In Sitecore, renderings are used to display content on a page or part of a page. Some types of renderings in Sitecore include:

• View Rendering: This is used for components that don’t need much logic or database interaction. It’s best for displaying content that doesn’t require complex business or presentation logic.
• Controller Rendering: This rendering involves providing a model, controller, and view. It’s used for displaying content that needs more complex business logic or presentation logic and relies on external data.

4. What is meant by the media library in Sitecore?

The Media Library in Sitecore is the place where you can store and organize all your media items, such as images, videos, audio files, and documents. You can upload and organize files like images (jpg, gif, png), documents (PDF, DOC, PPT), and media files, which can later be accessed and used in the Content Editor.

All your media files are kept in one place and can be organized in folders, similar to how content is arranged in the content tree. You can easily find media items using Sitecore’s search or by navigating through the folders in the Media Library.

5. What are tokens? And what types of tokens does Sitecore support?

As Sitecore developers, it’s a best practice to define Standard Values when creating templates. This allows you to set default or sample values for fields.

To achieve this, we can leverage Sitecore Tokens, which enable dynamic value insertion into fields based on the specific item created by the content author.

Sitecore provides several built-in tokens that can be used dynamically, including:

• $name: The name of the newly created item.
• $id: The ID of the new item.
• $parentid: The ID of the parent item.
• $parentname: The name of the parent item.
• $date: The current date in yyyyMMdd format.
• $time: The current time in HHmmss format.
• $now: The current date and time in yyyyMMddTHHmmss format.

Example of tokens

Here’s an example using the $name token. In this case, we have a field called “Heading.” When a new item is created, the value of this field will automatically be set to the name of the item being created.

6. What are the different publishing modes in Sitecore?

There are three types of publishing modes in Sitecore:

1. Incremental Publish: This mode only publishes the items in the publishing queue. This method is quicker because Sitecore doesn’t have to check or compare different versions of items before publishing them.
2. Smart Publish: This mode publishes only modified items since the previous publish. It compares the items in the master database with their versions in the target database, and if any changes are found, those items are published. However, this can be slow because it compares all items, which can take time if there are many items.
3. Republish: This republishes everything, even items that haven’t changed. It replaces every item in the target database with the one from the master database and deletes old versions from the target database. This is useful for updating the website with new content, restoring backups, or adding new languages or targets to the site.

7. Partial designs and Page designs

Partial designs: To reuse similar layouts for sections like the header, footer, and main content of a webpage, you can create partial designs in the page builder. These partial designs consist of components that can later be combined to form full-page designs.

Navigate to the path “/sitecore/content/{Your-Tenant}/{Your-Site}/Presentation/Partial Designs” in the Content Editor. Right-click and select “Insert” to add a “Partial Design” to the header.

Access the newly created “Partial Design” for the Header in the Experience Editor.

Page designs: A page design combines layout elements that help you organize your pages. For example, you can ensure that the header and footer always appear in the same place. You can also create different page designs for specific pages, like a blog page, landing page, or product page. Content authors can then add content to these pre-made layouts.

You can create page designs using the Content Editor and the Experience Editor.

In the Content Editor, go to the path /sitecore/content/{Your-Tenant}/{Your-Site}/Presentation/Page Design. Right-click and choose “Insert” to add a new “Page Design”.

In the Design section, choose the partial designs you wish to add, like header, footer, or metadata, click the right arrow to transfer them to the selected items list, and then save your changes.

The Designing section has a field called “Template to Design Mapping.” This field links page designs to templates. Pages are created under “Home” using the Page template by default. We will map the design accordingly since we want a consistent design throughout the website. I associated the Article page design with both the Home and Page templates.

Now, when you browse the website, you will see your page content along with the content from the partial designs.

8. What is Scriban in SXA?

I’ll provide a quick overview of Scriban, but I strongly recommend reading this great guide by Drew Taylor for more information.

Scriban is used in rendering variants to define your HTML layout and control how the data from your template is applied.

Scriban have their own language and rules for getting data from the source and combining it with logic, HTML, CSS, and JavaScript in a single file.

9. What is Cloning in SXA?

In SXA, you can quickly duplicate a rendering using the clone script. This creates an exact copy of the rendering definition, parameters template, data source templates, and branches. You can then change the name and modify the style. This is helpful, for example, when you need several Promo renderings with different styles.

I strongly suggest you check out Ankit Tawale’s blog for a better understanding of cloning in SXA.

10. What does a pipeline mean in Sitecore?

In Sitecore, pipelines consist of a sequence of steps or processes that are executed in a defined order to achieve a specific task. They are a core component of Sitecore’s architecture. In Sitecore, various processes, including authentication, request handling, publishing, and indexing, are managed through pipelines. Developers can modify these pipelines by altering patch files to add, remove, or change functionality within Sitecore.

To explore and study all the available pipelines in Sitecore, the best approach is to visit the following page:

https://<domain>/sitecore/admin/showconfig.aspx

In the example above, we have a pipeline consisting of three processors. If we need to enhance the functionality, we can insert a new step into the pipeline.

We can also completely replace an existing step, providing greater flexibility to customize the functionality and execution of that step as needed.

This post covers essential Sitecore concepts that will help you create, manage, and optimize your digital experiences. By understanding tools like versioning, rendering, and pipelines, along with features such as media management and SXA, you’re equipped to leverage Sitecore’s full potential. Keep exploring and experimenting to unlock even more possibilities with Sitecore!

Looking to become a Sitecore developer? You’re in the right place! Sitecore is the most popular .NET-based Content Management System (CMS) used by businesses around the world to build personalized and smooth digital experiences. Sitecore keeps improving with new tools for its users.

Let’s start by understanding what Sitecore is all about…

1. What is Sitecore?

Sitecore is a powerful digital experience platform (DXP) built on ASP.NET, used by businesses to create and manage websites with personalized content. It helps web editors and marketers handle everything from social media and blog posts to advanced personalization. Sitecore is adaptable, can grow with your needs, and works well with other systems. Since its launch in 2001, it has become popular for managing digital content, optimizing user experiences, and analyzing customer data from both online and offline interactions.

2. What are the key features of Sitecore?

Here are some essential features of Sitecore:

1. Personalized Customer Data: Sitecore tracks customer interactions and behaviors, helping you understand and engage with them better to boost revenue.
2. Sitecore Experience Database (xDB): Combines all customer data (from CRM and other systems) into one place, giving you a complete view of each customer’s journey.
3. Sitecore Experience Profile (xP): Creates individual profiles for each customer, showing their activity on your site, like what they buy and click on.
4. Multi-language and Multi-Site Support: Sitecore makes it easier to manage global websites with multilingual support, helping you maintain a consistent brand experience.
5. Marketing Automation: Helps marketers set up automated campaigns that respond to customer actions, like sending a thank-you email after a purchase.
6. Federated Experience Manager (FXM): lets you use Sitecore features on non-Sitecore websites, providing a smooth experience and consistent customer data across all your sites.

3. What is SXA (Sitecore Experience Accelerator)?

The Sitecore Experience Accelerator (SXA) is a tool that helps web development teams build websites faster by allowing them to reuse components, templates, and layouts across different sites. It separates the design from the structure, allowing front-end developers, content authors, and designers to work simultaneously.

This makes it easier to create and maintain multiple sites efficiently. For example, while the front-end developer works on the site’s design, the content author can add the content, and the developer can set up the data templates.

4. What is the Standard Value in Sitecore?

In Sitecore, Standard Values are the pre-set defaults for fields in a data template. These values are used whenever a new item is created, ensuring that specific fields have a default value unless manually changed. Standard values are saved in a child item called “Standard Values” under the data template definition. Sitecore will use the standard value if a field value is missing or NULL. For example, the default value for the “Sample item” template is saved in the “_Standard Values” section, which is a child of the “Data” template.

5. What is Helix and Habitat?

Helix

Sitecore Helix is a set of best practices for building Sitecore websites. It helps organize the structure of your Sitecore solution and provides best practices to make development easier. Helix focuses on reducing dependencies between different parts of the project, making it easier to test, extend, and maintain. It’s designed to be flexible and work with any Sitecore project.

Habitat

This Sitecore project uses the Sitecore Experience Platform and follows Helix’s best practices for design. It serves as an example to show how Helix works in practice, helping developers avoid building modules from scratch. It also provides a solid foundation for creating and improving new modules.

6. What is the meaning of templates, and what are the different kinds of templates in Sitecore?

Templates in Sitecore define the structure and layout for content, helping organize how data is entered and displayed. Below are the main types of templates in Sitecore:

1. Data Templates define the fields, field types, and structure for content items.
2. Branch Templates create multiple related items or a hierarchy of items instead of just one item.
3. Command Templates use Sitecore commands to create items through custom logic or wizards rather than following a predefined structure.

7. What are the databases used by Sitecore?

Sitecore CMS uses three primary SQL Server databases:

1. Core: This database holds Sitecore settings, including configuration files for the Sitecore user interface. It customizes Sitecore, adding new apps to the Sitecore desktop.
2. Master: This database stores all versions of the content. Business users can edit and update content here.
3. Web: This database contains the latest published version of content that has passed through the final stages of its workflow.

8. What is meant by a Content Editor?

The Content Editor (CE) is where you can edit and organize all the content for your website. Its appearance and features may change based on user roles, security settings, and any customizations made to your Sitecore setup. The Content Editor is divided into three main sections, which you can adjust to your liking:

1. Ribbon: This area gives you access to all the features of the Content Editor.
2. Content Tree: This shows all the items in your Sitecore site, organized in a tree structure.
3. Content Area: Here, you can make changes or edit the details of your items.

9. What is an ‘item’ in Sitecore?

In Sitecore, an item is any content that makes up a webpage, such as text, images, layouts, or media files. Each item has a name, a unique ID, and a template that defines what kind of fields it includes. Items can have multiple versions in different languages as well.

You can create, edit, and manage content using the Content Editor (for handling content) or the Experience Editor (for editing content that shows up on the website). Before editing an item, it needs to be in “editing mode.” To avoid others working on the same item at the same time, you can lock the item while you’re editing it.

10. What do CM (Content Management) and CD (Content Delivery) mean?

Content Management (CM): is the section of Sitecore where content editors can add, update, and manage the content on the website.

Only content editors can use this feature, accessed through the Sitecore Experience Platform. The dashboard offers different options based on the editor’s role. Ultimately, it’s the content editor that will be used to manage and make changes to the content, as shown below:

Content Delivery (CD): CD is responsible for selecting and displaying the right content in the correct format across all channels, ensuring a smooth experience for website visitors. Multiple content delivery servers can be set up to improve performance and scalability.

Once a content editor finishes and finalizes the content, they can make it “live” by publishing it. This process moves the content from the “master” database to the “web” database. The content is visible to everyone once it’s in the web database. Content delivery servers only pull content from the “web” database and not from the “master” database.

To continue exploring Sitecore’s key concepts, check out Part 2: Sitecore Quick Guide for the Beginner for further insights and information.

Optimizely Configured Commerce provides a unique way of managing emails. This allows administrators to configure and manage the email templates and settings used for automated email communications with users. This feature is essential for ensuring consistent branding, and operational efficiency in a B2B e-commerce environment. And most importantly, those emails are setup automatically and should not require many updates.

However, in some scenarios, you might need more customizations when working with emails. This article will provide more insights about Optimizely Configured Commerce’s Emails that have not been covered in the documentation. You will get some ideas on how to deeply customize the Email Templates and also, send emails using the B2B framework from Optimizely.

Prerequisites

Before jumping into customization, you need to have fundamental understandings about Email Administration in Configured Commerce.

• This will help you know more about the process flow for how emails are sent: https://docs.developers.optimizely.com/configured-commerce/v1.5.45-b2b-sdk/docs/defining-working-with-and-troubleshooting-email-lists-and-templates
• You also need to be able to work with Email Templates in admin console effectively: https://docs.developers.optimizely.com/configured-commerce/v1.5.45-b2b-sdk/docs/creating-and-editing-email-templates

How to send email with Optimizely Configured Commerce

In Optimizely Configured Commerce, emails are sent automatically when a certain event occurs on a webpage (for example, order confirmation email is sent when submitting an order). However, some actions are not associated with sending mails. If you want to do that, like sending a notification email to the new registrant, you have to put some code inside your custom handlers, or Web API Controllers. Using .NET SmtpClient is a good choice, but in the scope of this article, I would suggest utilizing the EmailService inside the B2B framework that we’re using. The reason is you can benefit from the Email Administration feature that is integrated to Configured Commerce, from managing email templates to monitoring the email message logs, etc. Every mail sending through the EmailService will be kept track of inside this screen:

As being said, here’s how you can send the email any time with B2B Email Service (along with explanation):

// getting email template from IEmailTemplateUtilities (you need to inject this interface in your controller)
var emailTemplate = emailTemplateUtilities.GetOrCreateByName("MyCustomEmailTemplate");

// retrieving the content manager from the email template
var emailTemplateContentManager = emailTemplate.ContentManager;

// using IContentManagerUtilities to get the current version of the email body (you also need to inject this interface in your controller)
var htmlBody = contentManagerUtilities.CurrentContent(emailTemplateContentManager).Html;

// now create the email model to store the dynamic data. It's basically an ExpandoObject
dynamic emailModel = new ExpandoObject();
emailModel.Name = "John Doe";

// Parsing the template. For example, the placeholder [[Model.Name]] in the html body will be replaced with the actual data of emailModel, which is "John Doe".
// You need to inject the IEmailService before using it
string strEmailBody = emailService.Value.ParseTemplate(htmlBody, emailModel);

// Send the email with Configured Commerce's IEmailService
var sendEmailParameter = new SendEmailParameter();
sendEmailParameter.ToAddresses = new List<string>(){ "john.doe@test.com" };
sendEmailParameter.FromAddress = "defaultemail@test.com";
sendEmailParameter.Subject = "Welcome to our site";
sendEmailParameter.Body = strEmailBody;
try
{
    emailService.Value.SendEmail(sendEmailParameter, unitOfWork);
}
catch (Exception e)
{
    // Error handling
}

You can create a new template or edit an existing one. The IEmailService will send successfully as long as it is able to find the template name, and the placeholders match with the structure of your Email Model ExpandoObject:

Customize Email Templates

DotLiquid is used to render the views of all email templates. However, seems like it’s not the standard DotLiquid syntax. The syntax has not been documented, this is what I found while inspecting the default templates:

Placeholder Syntax

The templating engine uses this syntax [[Model.PropertyName]] to render dynamic data from the Model. Since the Model is an ExpandoObject so you’re free to define any property inside. Also, there’re bunch of built-in variables for existing templates, please refer here: https://support.optimizely.com/hc/en-us/articles/4413199986957-HTML-variables-for-email-templates

If-Else Statement

Use this logic block when you want to render something conditionally.

If:

[% if Model.MyProperty != null and Model.MyProperty != "" -%]
    <p>[[Model.MyProperty]]</p>
[% endif -%]

If-Else:

<strong>
    [% if Model.FirstName!= null and Model.FirstName!= "" -%] [[Model.FirstName]] [% else -%] [[Model.LastName]] [% endif -%]
</strong>

Iteration

Use this block to loop through a list:

[% for orderGroup in Model.OrderGroups -%]
    <div>
          <p>[[orderGroup.Heading]]</p>
    </div>
[% endfor -%]

Note: As of now (Jan 2025), the templating engine hasn’t supported nested loop yet.

Site Messages

You can even use Site Messages in your templates. For example:

<span>[% siteMessage 'Welcome_Message' %]:</span>

The cool thing about it is, Site Messages can be localizable. So based on SiteContext.Current.LanguageDto (from Insite.Core.Context), it can detect the current language and translate the message automatically for you.

I hope this information will be helpful when you need to work on Email Administration in Optimizely Configured Commerce. Happy coding!

Introduction

In today’s dynamic web development landscape, ensuring an exceptional user experience is more critical than ever. Core Web Vitals, introduced by Google, are key performance metrics that help evaluate the overall quality of a website’s interaction. React applications often involve complex UI and dynamic content. Optimizing Core Web Vitals ensures not just better user experiences but also improved SEO and performance in these scenarios. For React developers, optimizing these metrics can greatly enhance both performance and SEO rankings. This guide outlines actionable strategies to fine-tune Core Web Vitals in modern React applications.

What Are Core Web Vitals?

Core Web Vitals are performance indicators focusing on three essential user experience elements:

• Largest Contentful Paint (LCP): Gauges loading performance, with an ideal score under 2.5 seconds.

• Interaction to Next Paint (INP): Measures interactivity, targeting scores below 200 milliseconds for optimal responsiveness.

• Cumulative Layout Shift (CLS): Evaluates visual stability, aiming for a score under 0.1.

Strategies to Optimize Core Web Vitals

1. Enhance Largest Contentful Paint (LCP)

      Recommended Techniques:

• Lazy Loading: Defer loading images and videos not immediately visible on the screen.

import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./ImageComponent'));

const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <LazyImage />
  </Suspense>
);

export default App;

• Critical CSS: Use tools like Critical to inline essential CSS for above-the-fold content.
• Optimized Media: Serve properly compressed images using formats like WebP to reduce load times.

For a deeper understanding and best practices for implementing lazy loading, refer to the official Lazy Loading Documentation.

2. Improve Interaction to Next Paint (INP)

     Recommended Techniques:

• Code Splitting: Break your code into smaller chunks using tools like Webpack or React’s lazy and Suspense.

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

const App = () => (
  <Suspense fallback={<div>Loading Component...</div>}>
    <LazyComponent />
  </Suspense>
);

• Avoid Long Tasks: Keep the main thread responsive by breaking down lengthy JavaScript operations. Use requestIdleCallback for low-priority tasks.

requestIdleCallback(() => {
  performNonUrgentTask();
});

3. Minimize Cumulative Layout Shift (CLS)

     Recommended Techniques:

• Define Dimensions: Specify width and height for all media elements to prevent layout shifts.

<img src="image.jpg" width="600" height="400" alt="Example" />

• Font Loading Optimization: Use font-display: swap to ensure text is readable while fonts are loading.

@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap;
}

• Preserve Space: Reserve space for dynamic content to avoid pushing elements around unexpectedly.

Tools for Monitoring Core Web Vitals

• Performance tab in dev tools.

Use the Performance tab in Chrome DevTools to analyze and optimize Core Web Vitals, helping you track key metrics like LCP, FID, and CLS, and improve your site’s loading speed and interactivity.

• Lighthouse: Perform in-depth audits directly in Chrome DevTools.

Lighthouse, a powerful tool built into Chrome DevTools, provides comprehensive audits of your website’s performance, including detailed insights into Core Web Vitals like LCP, FID, and CLS, along with actionable recommendations for optimization.

Refer the official lighthouse documentation for deeper insights into the tool.

• Web Vitals Extension: Monitor Core Web Vitals in real time with this browser extension.

The Web Vitals Extension is ideal for ongoing, real-time monitoring of Core Web Vitals as you browse, giving quick feedback on page performance and helping you address issues instantly without needing to run full audits.

• PageSpeed Insights: Access tailored recommendations for enhancing performance metrics.

For more information on each of these metrics and their importance, check out the official core web vitals documentation.

Conclusion

Optimizing Core Web Vitals is a critical step in creating a seamless and engaging user experience. Techniques like lazy loading, breaking down JavaScript tasks, and ensuring visual stability can dramatically improve your React application’s performance. Start implementing these strategies today to boost user satisfaction and climb search engine rankings.

Happy coding!

Introduction

Have you ever noticed a web application becoming slower and less responsive the longer you use it?  This is often a sign of a memory leak. Memory management is a critical aspect of software development, especially in JavaScript, where developers rely on automatic garbage collection. However, improper memory handling can lead to memory leaks, causing your application to consume more memory than necessary and eventually degrade in performance. This blog will guide you through understanding memory leaks, identifying them, and implementing fixes.

What are Memory Leaks?

A memory leak occurs when a program allocates memory but fails to release it after the memory is no longer needed. In JavaScript, this typically happens when objects that are no longer required remain referenced, preventing the garbage collector from reclaiming the memory.

What Causes Memory Leaks?

1. • Accidental Global Variables Declaring variables without let, const, or var creates unintended global variables:

// A function that creates a global variable accidentally

function createLeak() {
    leakyVariable = "I am global!"; // No 'let', 'const', or 'var' keyword makes this global
}
createLeak();

Fix: Always use let, const, or var.

1. • Uncleared Timers and Event Listeners Listeners and timers hold memory if not properly cleaned up:

// Adding an event listener to a button

let element = document.getElementById("button");
element.addEventListener("click", () => console.log("Clicked!"));

Fix: Remove listeners and clear timers:

element.removeEventListener("click", handler);
clearTimeout(timer);

1. • Detached DOM Elements Keeping references to removed DOM elements prevents garbage collection:

// A reference to a DOM element that is removed

let detached = document.getElementById("div");
document.body.removeChild(detached); // Removing the element from the DOM

Fix: Clear the reference to allow garbage collection

detached = null; // Now eligible for garbage collection

Identifying Memory Leaks

• Use Chrome DevTools

1. Open DevTools and go to the Memory tab.
2. Take snapshots before and after interactions to see retained memory.
3. Look for memory that does not decrease over time.

• Monitor Performance

Record memory usage using the Performance tab to detect increasing trends.

1. Open Devtools
2. Load the website
3. Check the Memory checkbox in the performance tab and then Reload by clicking the reload icon.
4. Load profile and memory graphs

• Using Lighthouse

Lighthouse is a tool built into Chrome DevTools that provides automated performance audits, including memory usage. It generates a report with actionable insights to help optimize your web app’s performance and prevent memory-related issues

Fixing Memory Leaks

• Clean Up Listeners and Timers

element.removeEventListener("event", handler);
clearInterval(intervalId);

• Avoid Global Variables with strict mode:

‘use strict’;

• Detach DOM References after removal:

node = null;

Conclusion

Memory leaks in JavaScript often arise from timers, event listeners, or dangling DOM references. Use DevTools to identify leaks and clean up your code by following best practices. By keeping memory usage in check, you’ll ensure a smoother, faster user experience.

Happy coding!