Front-end development is all about building and designing the parts of an application that users see and interact with. Although an app’s backend does all the heavy lifting in terms of processes and functionalities, app users cannot see or relate to the backend, no matter how complex it is. They can only see the design elements, navigational menus, and overall layout of the user interface. This is why building a visually rich front-end through custom frontend development services is considered an unavoidable part of any app development project.

In this guide, we will explore all you need to know about front-end app development, starting with the definition, tools, and components of a robust front-end system. We will also provide an in-depth overview of the most important front-end technologies and the process of bringing your app’s visual part to life.

Front-end development focuses on building the visual and interactive parts of websites and applications.
A standard front-end workflow involves requirements gathering, UI/UX design, development, testing, deployment, and maintenance, with a focus on responsiveness, accessibility, and performance optimization at every stage.
Developers use a range of technologies, including core development technologies (HTML, CSS, JavaScript, and TypeScript), state management tools (Redux, Vuex), build tools (Webpack, Vite), and others to build scalable and efficient interfaces.
Strategies like code splitting, lazy loading, version control, and using Core Web Vitals help developers build fast, responsive, and SEO-friendly applications that work seamlessly across browsers and mobile devices.

What Is Frontend Development?

Before we dive into the intricacies of the front-end development process, we should start with an introduction to front-end development by defining its meaning and its importance in building modern websites and applications.

Frontend development is all about designing and building user experiences on apps and websites. It involves using a wide range of coding and design techniques to build the visual elements of an application that users interact with directly. This section explains how rendering an elegant, fast, and easy-to-use frontend contributes to user engagement and interaction.

Definition and Purpose

Frontend development refers to the process of creating the user-facing side of a web page or application. This is also known as client-side development, and it involves the creation of the user-interface elements and layout of an app using technologies like HTML, CSS, and JavaScript (along with their frameworks).

Front-end developers create engaging and immersive user interfaces through the combination of front-end elements such as text, images, videos, graphs, and tables that are included on a web page. They’re also concerned with the overall color scheme and the inclusion of interactive elements such as buttons, sliders, pop-ups, navigational menus, and animations that users interact with directly.

The role of front-end development in web and mobile app development cannot be overemphasized. Since this is the part that users interact with directly, it determines the overall application experience.

Frontend vs. Backend Development: Understanding the Differences

Every functional software or application has a frontend and a backend. As explained above, the frontend is concerned with the visual components that users see and interact with directly (client side), the backend, on the other hand, refers to what goes on under the hood to give the app its structure and functionalities (server side).

Say you built an e-commerce website where customers can order a product online. Front-end development is concerned with the store’s layout and visual design elements that determine its overall look and feel on the user side.

The pages showcasing the product images, their descriptions, and prices are also aspects of front-end development. Front-end developers ensure that everything, all the way up to the shopping cart and checkout process, is as intuitive as possible. They may also include dynamic elements such as input forms, dropdown menus, filters that change how the products are displayed, and search bars that can suggest results as you type. All of these front-end elements make your store dynamic and responsive.

If the frontend is the storefront, then the backend or server side refers to the behind-the-scenes operations that allow your web page or app to function as a true e-commerce platform. This includes the website’s database, where all the product information is stored, the server-side logic that determines when orders have been placed and tracks how many items are still left in stock, payment processors, and other back-end systems that work together to fulfill order requests when the user clicks the buy button. Combining the frontend and backend is what is known as full-stack development.

Importance of Frontend Development in Modern Web Applications

Your app’s frontend is the first point of contact with the users. Without it, they will not be able to use the functionalities provided by the app’s backend at all. A well-designed and visually appealing frontend creates a positive first impression that determines whether or not they’ll continue using your app.

App features like the navigation, interactivity, accessibility, and even responsiveness all depend on the front-end. And if they’re well executed, they make the app attractive, easy to interact with, and functional across different platforms or devices.

Frontend Development Process: A Step-by-Step Guide

Given the importance of an app’s frontend to its appearance and performance, developers have to follow a structured process to execute a front-end development project. This section highlights the basic steps of app frontend development.

1. Requirements Gathering and Analysis

Requirements-gathering is the foundation of every software development process. This stage aims to fully understand the goals of the project and user needs. The results of this phase will help you develop clear specifications that guide designers and developers in creating a front-end application that truly resonates with users. Requirement gathering often involves collaboration with multiple professionals, including business analysts, product managers, UI/UX designers, and front-end developers.

2. Planning and Designing the User Interface

Planning and designing the user interface is a stage where user expectations, business goals, and technical realities begin to align. The process typically begins with UX designers mapping out how users will interact with the application, often by creating user flows that represent common paths taken within the app. These flows help to inform the layout and structure of each screen, which are first visualized in the form of low-fidelity wireframes.

As wireframes are refined through feedback and iteration, they evolve into high-fidelity mockups or interactive prototypes using tools like Figma or Sketch. These mockups define the visual direction, including colors, typography, spacing, and component behavior, while ensuring the interface remains accessible, responsive, and aligned with any existing design system.

Parallel to this design work, the development team begins early planning by reviewing the proposed layouts and features. This helps identify technical constraints or opportunities, align on integration points with backend systems, and prepare for the upcoming implementation phase. Once designs are approved, they are broken down into discrete development tasks, the necessary tech stack is confirmed, and a timeline for delivery is established based on effort estimates and team capacity.

3. Development and Implementation

With the design finalized, development begins by setting up a proper environment. This includes creating a version-controlled repository (typically using Git), choosing a code editor, installing relevant dependencies or libraries via a package manager, and configuring local servers for real-time preview and testing.

Once set up, you can start coding the interface using HTML and Cascading Style Sheets (CSS) programming languages for structure and styling, and JavaScript to add interactive elements. Modern frontend development often involves frameworks like React or Vue, which support reusable, component-based architecture.

Beyond layout and functionality, this phase also focuses on performance, responsiveness, accessibility, security, and SEO. Developers may use build tools like Webpack or Vite to optimize loading times and streamline the workflow.

This stage transforms static designs into a dynamic, user-ready application, often in close coordination with backend APIs and team collaboration tools.

4. Testing and Quality Assurance

After developing your frontend, you must ensure that the interface you have built works flawlessly based on the laid-out requirements. This involves testing how your app performs across different browsers and devices. Front-end testing also allows you to identify any inconsistencies in the design or layout, functional errors, or performance issues. For more details about the testing and performance optimization, you can read our comprehensive guide on front-end testing.

5. Deployment and Maintenance

After your app has been thoroughly tested and found to be consistent with the intended design with no bugs, you can proceed to the deployment phase. This involves setting up a domain and hosting for a website or app store deployment for an application. After deployment, your application requires ongoing monitoring and maintenance to keep it in perfect condition. You also need to carry out periodic updates and upgrades to adapt to changing user needs, market demand, or project requirements.

Benefits of FrontEnd Development

The frontend of an app or website is its face. A well-crafted one doesn’t just make a product look good, but it plays a critical role in shaping user experience, engagement, and ultimately, business success. Here are some of the key benefits of investing in high-quality front-end development.

Improved Conversion Rates: An intuitive and visually appealing frontend helps attract and retain users, guiding them smoothly through your product’s core actions. Clear navigation, fast load times, and interactive elements all contribute to higher engagement and better conversion outcomes.
Positive User Experience: Great frontend designs play a major role in determining user experience. Users will enjoy spending time on an app with a visually appealing interface, clean layout, and well-built elements. Thoughtful layout, visual hierarchy, and consistency across the UI make the application feel polished and trustworthy.
Brand Perception and Trust: A professional and consistent UI reinforces your brand identity and builds credibility with users. A polished frontend can set you apart in competitive markets and influence how your product is perceived.
Better Visibility: Optimized front-end code supports better indexing by search engines, improving your website’s organic search visibility. Fast load times, structured content, and mobile-friendly design all contribute to higher rankings and greater discoverability.
Maintainability and Scalability: Modern frontend development uses modular, component-based structures that make it easier to update and scale over time. This leads to lower maintenance costs and a more agile product lifecycle.

Common Challenges in Frontend Development

Developers frequently navigate a variety of hurdles to deliver top-performing front-end systems that meet industry standards. Challenges range from building for different devices to keeping up with emerging technologies. Some of the major ones are highlighted below.

Cross-Browser and Cross-Device Compatibility: Front-end systems are expected to maintain optimal appearance and performance across all existing browsers, screen sizes, and operating systems. This can be particularly demanding due to inconsistent rendering engines and varying levels of support for CSS and JavaScript features.
Performance Optimization: Front-end performance is affected by numerous factors, from image sizes and script execution to animation smoothness and third-party integrations. Optimizing all these layers while keeping the codebase clean and maintainable demands ongoing effort.
Version Control and Component Synchronization: In large-scale applications, teams often work on different UI components simultaneously. Managing multiple component versions, syncing them across branches, and ensuring that everything integrates smoothly can become a major bottleneck.
Rapidly Changing Technologies: The front-end development niche is evolving fast. New frameworks, libraries, and tooling options are released regularly, often rendering older ones obsolete. Staying up to date requires continuous learning and sometimes painful migration of existing systems to newer technologies, especially when tool versions introduce breaking changes.

Core Frontend Technologies: HTML, CSS, and JavaScript

To design and code the layout of front-end interfaces, developers use different programming languages, technologies, and tools. This section provides an overview of the core technologies and their roles in frontend development. For more details about each of them, you can read our article on front-end technologies.

HTML: Structuring Web Content

HTML (short for Hypertext Markup Language) is the technology used to define the foundational structure of a web application. HTML defines the arrangement of the content of a web page, including the headings, paragraphs, lists, images, and links. Each of these is uniquely identified with tags arranged based on a predefined syntax.

CSS: Styling and Layout Techniques

The primary function of the Cascading Style Sheet is to enhance the visual representation of a web page by styling the HTML elements that have been added to the code. With CSS, developers determine the position and layout of elements, colors, fonts, and overall responsiveness of the page.

JavaScript: Adding Interactivity to Web Pages

JavaScript makes it possible to add dynamic behavior and interactions to your web page. By writing JavaScript code for your website, interactive content such as forms, animations, and interactive maps can be added to change the site from static to dynamic.

TypeScript: Enhancing JavaScript with Static Typing

TypeScript is a strongly-typed programming language commonly described as a superset of JavaScript. It actually introduces static typing to JavaScript. This allows developers to catch errors during development, an attribute that makes development faster and more scalable.

Popular Frontend Frameworks & Libraries

In addition to the core development technologies, frontend developers also use frameworks to build the graphical user interface (GUI) of websites or create single-page applications. Frameworks give structure to the development process while also speeding things up and ensuring consistency. Below is a list of some of the major frameworks and libraries used in modern frontend development. For more about each of them, you can read our comprehensive guide on frontend frameworks.

React, Angular, and Vue: An Overview

React, Angular, and Vue are frontend libraries and frameworks that allow developers to build user interfaces by breaking them down into smaller, self-contained components. This modularity allows developers to build faster and more efficiently while also making their code more maintainable. Attributes like virtual DOM for React and Vue, and Angular’s server-side rendering help to optimize the performance.

Choosing the Right Framework for Your Project

Your choice of framework can either steer your project toward success or become an obstacle in your development journey. With so many options available, each boasting unique strengths and trade-offs, selecting the right open-source JavaScript framework can be a challenging task.

Rather than getting caught up in debates over the key differences, strengths, and weaknesses of each framework, focus on your specific project needs. Begin by clearly defining your project goals and outlining all technical requirements, such as targeted web browsers, platforms, and devices. This approach allows you to assess the technical capabilities and flexibility of each framework, ensuring you pick one that aligns perfectly with your project’s unique demands.

Additionally, consider the future growth potential of your project. Anticipate how your framework choice will impact scalability and performance down the line, helping you build a robust and maintainable frontend that supports a seamless user experience.

Utility Libraries: Bootstrap, Tailwind, jQuery

Bootstrap, Tailwind, and jQuery are CSS styling and utility libraries primarily used to refine the style, visuals, and user interactions of a website or app. Tailwind promotes rapid and efficient styling with its utility-first approach. Bootstrap introduces powerful grid and utility classes while jQuery provides a lightweight library for manipulating HTML elements and introducing interactivity to web projects. These libraries also make it easier for a front-end web developer to create clean, readable, and more maintainable code.

Frontend Components: Building Reusable UI Pieces

The modern approach to building web user interfaces involves implementing a component-based architecture. This method has revolutionized front-end development by enabling developers to break down complex projects into smaller, reusable UI components, enhancing both efficiency and code organization. Utilizing front-end components not only streamlines development but also simplifies maintenance and updates. In this section, we will explore how components function within web development and highlight the front-end frameworks that empower this approach.

What Is a Component?

In front-end development, a component is a smaller, more manageable piece of your user interface. These are encapsulated blocks of logic and style that represent parts of a larger user interface. Components are building blocks that can be combined to create a complete user interface. Each component is self-contained, meaning it can handle its own state and rendering independently of other components. This development approach makes code more modular and easier to manage.

Component-Based Architecture in React, Vue, and Angular

Front-end frameworks and libraries like React, Vue, and Angular make it easier to build scalable applications using a component-based architecture. They promote modularity, reusability, and maintainability, all crucial for developing complex user interfaces efficiently.

Each framework handles components in slightly different ways. In React, components are typically defined as JavaScript functions or classes, using a syntax extension called JSX to mix HTML-like markup with logic in a declarative style. This simplifies the process of creating dynamic UI elements.

In Vue, components are usually written as Single File Components (SFCs) that bundle HTML, CSS, and JavaScript into one .vue file. This format makes code more intuitive and easier to maintain. For managing state and routing, Vue offers official libraries like Vuex (now gradually being replaced by Pinia) and Vue Router.

Angular follows similar component-based principles but is a complete framework rather than a library. It uses components that encapsulate templates, styles, and behavior, and includes powerful features like hierarchical dependency injection and built-in routing. Angular’s opinionated structure provides a more rigid but comprehensive development environment.

Container vs Presentational Components

Components in frontend development (particularly React) can be grouped into two main categories. We have the presentational components that are primarily concerned with the appearance of the user interface. While they do receive data and callbacks via props, presentation components are usually stateless.

The other category is the container components. These are logic-heavy components that can be used to manage state and business logic in React applications. Container components can fetch data, handle user interaction, and pass data to presentational components and other container components.

By clearly separating the user interface from the underlying logic, developers can make their application codebase much easier to maintain. This approach also allows presentational components to be reused across different parts of an app since they remain independent of specific business logic.

State Management in Frontend Applications

Modern frontend applications have to deal with a lot of dynamic or constantly changing data from user inputs to API responses. The process of handling and synchronizing this data across different parts of an application is known as state management. In this section, we will explore the concept of state management, its importance, and how different JavaScript frameworks handle changing data states.

Understanding State and Its Importance

State management is a vital part of frontend development because it defines how mobile apps handle changes in data. Efficient state management will ensure that changes in data or user inputs are reflected accurately across an application. This is particularly important for larger and more complex apps with intricate state dependencies where components rely on a shared state to function effectively.

Efficient state management ensures that different parts of your apps are synchronized so the UI doesn’t display inaccurate or outdated information. This is also crucial for performance, preventing unnecessary re-renders and other performance bottlenecks.

Redux: Predictable State Container for JavaScript Apps

Redux is a powerful library for global state management in React Apps. It works by providing a centralized repository that serves as a single source of truth for all the states of an application. With this solution, all the components in a JavaScript app can access and update their state from this centralized store, regardless of their position in the component tree.

Redux handles state management with actions and reducers. In this library, actions are commands that describe the changes that should happen, while reducers specify how the state should change in response to these actions. Redux uses a structured approach to state management that scales well, especially for complex applications with several interconnected components.

Context API: Managing State in React Applications

The Context API is React’s built-in feature for global state management. It allows developers to create a context that can be accessed by any of the UI components to determine their state. It provides a way to pass data through the component tree without using props.

One major advantage of Context API is that it is simpler and easier to use compared to third-party libraries like Redux. However, while the Context API itself is simple to use for less complex applications, in more intricate scenarios where state changes frequently, it can lead to excessive re-renders. To effectively manage complex state, developers often combine the Context API with the useReducer hook or other patterns.

Vuex: State Management Pattern + Library for Vue.js

Vuex is similar to Redux, but is used to handle state management patterns in Vue.js apps instead of React. It works by providing a centralized repository for state storage from which components can access the state and dispatch appropriate updates. This is a more efficient alternative to passing props and emitting events up and down the component tree, especially for large-scale apps with multiple components and complex state dependencies.

UI/UX Design Principles for Front-End Developers

Beyond the technical complexities and abstractions, the core of front-end development is to develop websites and apps that are visually appealing, user-friendly, and efficient. A good custom front end improves UX with key concepts like hierarchy, responsiveness, and accessibility, helping craft appealing and intuitive interfaces. Here’s an overview of some of the key principles and tools you need to create great UI/UX for your applications.

Responsive and Mobile-First Design

With mobile devices being the most popular way people access applications, responsive design is an essential part of app development. This ensures that your application works seamlessly across multiple devices and screen sizes.

Traditionally, developers achieve responsiveness and build mobile-first websites by using fluid grids, flexible images, and writing media queries that adapt individual elements of a web page to the user’s device. However, CSS frameworks such as Bootstrap have further simplified responsive web development with their grid system, responsive utilities, navigation, and breakpoints that trigger layout changes at specific screen widths. Frontend developers can also use no-code solutions such as WeWeb to visually design responsive layouts without writing media queries from Scratch.

Web Accessibility (WCAG) Guidelines

Over a billion people all over the world live with one disability or the other. To make your website accessible to everyone, you need to prioritize inclusive design by following Web Content Accessibility Guidelines, which provides a wide range of recommendations that will make web content more accessible to users.

Some of these guidelines include writing semantic HTML with ARIA (Accessible Rich Internet Applications) roles to improve the accessibility of interactive elements on your web page. This also ensures proper document structures and hierarchy. You also need to provide proper descriptive alt text for images and ensure all interactive elements are navigable.

Prototyping Tools: Figma, Sketch, Adobe XD

Building an app with great UI/UX doesn’t just start at the coding phase; it begins with the planning and design of your project. By using the right UI/UX tools, you can leverage the robust features and comprehensive design systems offered by these tools to craft seamless digital experiences for users. Figma, Adobe XD, and Sketch are three of the most popular tools for this purpose. In addition to their robust design features, each of these tools also has developer modes that allow designers to share project links with developers, with features for inspecting elements, viewing CSS, and exporting assets directly to the coding environment.

Essential Frontend Developer Tools

Developers, like other engineers, need robust tools for various aspects of any project they embark on. These tools enhance the project workflow, boost productivity while also elevating the quality of your web projects. From code editors to version control tools, below is an overview of some must-know development tools developers need for productivity and code management.

Code Editors and IDEs

As soon as you move on from the design phase to actually writing the code for your application, you will need either a code editor or an Integrated Development Environment (IDE). A code editor is the simpler option of these two because it is mainly used for writing and editing code. It offers essential features like syntax highlighting, code completion, and basic debugging. Some of the most popular code editors include Atom and Sublime Text.

On the other hand, an IDE is a more robust solution with a full suite of software development features. In addition to writing and editing code, an IDE also has features for debugging, compiling, and even deploying websites and apps. Developers commonly use IDEs such as Visual Studio Code (or Visual Studio), IntelliJ IDEA, and PyCharm to improve their code creation and modification efficiency.”

Version Control with Git and GitHub

The first complete version of your codebase is rarely ever the last one. In most cases, you will create multiple versions and iterations of the code across the project lifecycle. A version control tool is needed to track the different versions of the code and maintain a record of every change, along with essential details about authorship, timestamp, and the changes made to the code. This also comes in handy when you have multiple users adding their frontend development skills to the project.

Git is one of the most popular version control programs among developers, renowned for its extensive feature set that makes it suitable for managing virtually any project. As a free, open-source tool, Git is typically installed locally by developers and offers a highly efficient, decentralized workflow for version management. It includes powerful features such as branching and merging that enhance productivity and collaboration. Git also serves as the foundation for many other version control services, including GitHub, a paid online platform that enables developers to run Git in the cloud and facilitates seamless project sharing and collaboration.

Linters, Formatters, and Package Managers

The visual quality and performance of your software depend on the quality of the underlying code base. To ensure a clean and efficient codebase management, developers often use tools that help enforce coding standards and dependencies. Linters, formatters, and package managers are examples of such tools.

Using all the tools listed above to write clean code also makes error handling and code maintenance significantly easier. Linters and formatters are closely similar tools used to analyze source code to identify programming (or stylistic) errors and bugs. Linters are specifically used for catching errors and stylistic issues, while formatters help developers maintain a consistent coding style.

Package managers, on the other hand, handle dependency management. These tools ensure that projects have the necessary libraries and files that have been installed by a package. By using package managers, developers can ensure that no unused files are left behind, so the code works efficiently as expected.

Build Tools & Performance Optimization

Optimizing front-end performance is one of the most crucial steps in building a fully functional website or application. To achieve this, developers use build tools, which are programs or processes that carry out processes such as bundling, minification, and transpiling. These vital processes transform raw code into a production-ready form that can be easily understood by browsers and devices. In this section, we will explore how these tools and techniques work for the delivery of faster and fully optimized apps. You can also read our dedicated article on front-end performance optimization for more information about this topic.

Using Webpack, Vite, and Babel

Modern build tools such as Webpack, Vite, and Bebel offer a wide range of plugins and configurations, automating build tasks like minification, bundling, and testing. Webpack is a powerful module bundler used for bundling multiple JavaScript files, stylesheets, and images into a single file to optimize performance and load times. Vite performs the same function, but with an emphasis on simplicity and speed, which makes it the preferred choice for smaller projects.

Babel, on the other hand, is a JavaScript compiler and toolchain used to transform new syntax into older versions that can run seamlessly in older browsers. This way, developers can take advantage of the latest JavaScript features that will still run seamlessly in older browsers.

Code Splitting and Lazy Loading

Another way to improve the performance of your frontend systems is by using code splitting and lazy loading. React offers built-in support for these optimization techniques, which break down large JavaScript bundles into smaller ones so you only need to load the code needed for the current view. Similarly, lazy loading works by delaying certain parts of an app from loading until they’re needed. While React supports these optimization techniques using dynamic imports, developers can also use third-party tools like Webpack or Vite to achieve similar results, boosting loading speed and overall performance.

Core Web Vitals and Performance Metrics

Google uses a set of performance metrics to measure the real-world experience of users on any web application. These are collectively known as Core Web Vitals, and they include metrics like the largest contentful paint, which measures loading performance; the Interaction to Next Paint, which measures responsiveness; and the Cumulative Layout Shift, which is a measure of visual appeal and stability.

To measure and improve these site performance benchmarks, you can use dedicated tools that collect real user data or solutions that run simulations on your website and generate reports. The reports can then be used to identify areas in need of improvement and tackle them.

Working with APIs & Backend Services

Unless you’re building a static website with a display-only interface, every frontend requires a backend that defines the operational logic of the web app or mobile application you’re building. Since APIs (Application Programming Interfaces) are the intermediaries between the frontend (the user-facing side) and the backend, developers need to learn how these interactions work and the various tools used to access backend services.

REST vs GraphQL: What to Use When

GraphQL and REST are two powerful communication protocols behind most modern applications. These two API architecture styles define how data is exchanged between the server or backend services and the client side of an application.

Although GraphQL and REST APIs are often used interchangeably, GraphQL is considered a better choice when you have limited bandwidth or you want to minimize the number of requests and responses. It also handles multiple data sources better by combining them at a unified endpoint. REST, on the other hand, is best used for handling simple data sources with well-defined resources.

Data Fetching with Fetch API and Axios

Fetch API and Axios are two of the most widely used JavaScript libraries for handling HTTP requests in the front end. Fetch is a built-in API available in all modern browsers, while Axios is a third-party HTTP client library. As a standalone solution, Axios provides a more feature-rich and often simpler API, with features like automatic JSON data handling and interceptors. This makes it a robust alternative to the Fetch API, which is considered more basic.

Firebase and Supabase as Backend Solutions

Firebase and Superbase provide serverless backend-as-a-service solutions for data storage in modern applications. While Superbase uses PostgreSQL as its relational database and offers support for SQL-based operations, Firebase uses a document-based database known as NoSQL. Developers who prefer a more traditional relational database architecture with open source flexibility and access control will prefer adopting Supabase for their project. Firebase, on the other hand, is designed to deliver real-time updates and offers deep integration with Google services.

Conclusion

As this guide shows, building a dynamic and interactive frontend interface is a potentially complex undertaking with several technical requirements. But doing it well does pay off in the long run. An optimized frontend system promotes visibility, engagement, and user satisfaction.

To pull off a successful frontend development project, you should collaborate with a reliable software development company. CrustLab is just the partner you need to execute your front-end project to perfection, especially in areas such as iGaming, Sports, Gaming, and FinTech. Contact us to discuss the details of your project and learn all about the latest frontend development trends that you should be aware of.