Enjoy 20% off all plans by following us on social media. Check out other promotions!

What's new

Here you'll find curated collection of our most insightful and engaging blog content, neatly organized into series for your convenience. Each series focuses on a unique theme or topic providing deep dive subject.
  • Leveraging Actions in React 19 for Enhanced Form Handling

    React 19 introduces actions to streamline form handling via the addition of new hook APIs. Let's look at how they can be used and discuss the advantages of this approach over traditional form handling methods

    Vikas Yadav
    9 min read
    Jun 21, 2024

    If you have used Next.js, you have probably heard of Server Actions as a new way to handle form submissions and data mutations in Next.js applications. Server Actions have both server-side and client-side aspects to them and Actions, the client-side APIs are landing in React 19! React Actions are not specific to Next.js or data fetching – they can be used with other server-side frameworks for any asynchronous operations.

    In this post, we will elaborate on what React Actions are and how to use the new hooks like useActionState and useFormStatus to build form submission experiences the modern way.

    Note: As of writing, React 19 has not been published and the API can be prone to updates, so you should always refer to the latest version of the documentation.

    Actions in HTML forms

    Before we dive deeper into React Actions, we should first understand the action property in native HTML forms. Before JavaScript was introduced, the common way to send the data to the server was via the action attribute on <form>s.

    When we define a <form> element, we can also set an action attribute to a URI which will be used as the endpoint to send the data to the server. The action attribute is often combined with method attribute which can be set to HTTP methods like GET or PUT.

    <form action="/user" method="POST">
    <input name="name" id="name" value="" />
    <button type="submit">Save</button>

    When a user clicks on the "Save" button, the browser will make a HTTP request to the /user endpoint using the specified HTTP method. This is a very powerful pattern that does not rely on JavaScript, however there are downsides of this approach:

    1. It results in a full-page refresh
    2. Form states like loading and error cannot be displayed

    Form submissions in React

    Submitting forms in React is straightforward. It can be done by utilizing the onSubmit prop and fetch API. We can show loading and error states through usage of the useState hook and onSubmit prop.

    import { useState } from 'react';
    export default function UserForm() {
    const [isPending, setIsPending] = useState(false);
    const [error, setError] = useState(null);
    const handleSubmit = async (event) => {
    const data = new FormData(event.target);
    try {
    await fetch('/user', {
    method: 'POST',
    body: JSON.stringify(data),
    } catch (err) {
    } finally {
    return (
    <form onSubmit={handleSubmit}>
    <input id="name" name="name" />
    {error && <p>{error}</p>}
    <button type="submit">{isPending ? 'Saving...' : 'Save'}</button>

    Client-side form submissions and updates offer several advantages, particularly in terms of user experience and performance:

    • Server requests made without a full-page refresh, which results in faster feedback.
    • Show different form states like loading and error – better user experience.

    While client-side form submissions and updates provide numerous benefits, there are also potential problems and pitfalls that we should be aware of:

    • Need to remember to use event.preventDefault otherwise the browser will do a full page refresh on submission of the form.
    • Boilerplate code is required to manually manage the form state.
    • Requires JavaScript to run.

    React Actions

    Enter the era of new React APIs! With the introduction of Actions in React 19, we can harness the power of form actions on the client side as well.

    How to use React Actions in forms

    Typically, HTML <form>s support URI strings for values to the action attribute. However, <form>'s in React 19 accept functions as valid values for the action prop! We can even pass in async functions to the action. When a string is passed to the action, the <form> will behave like native HTML forms, however if a function is passed, the form will be enhanced by React.

    <form action={actionFunction}>

    Let's convert the form above to use React 19's Actions:

    import { useState } from 'react';
    export default function UserForm() {
    const [isPending, setIsPending] = useState(false);
    const [error, setError] = useState(null);
    async function createUserAction(formData) {
    try {
    await fetch('/user', {
    method: 'POST',
    body: JSON.stringify({ name: formData.get('name') }),
    alert('User has been created successfully');
    } catch (err) {
    } finally {
    return (
    <form action={createUserAction}>
    <input id="name" name="name" />
    {error && <p>{error}</p>}
    <button type="submit">{isPending ? 'Saving...' : 'Save'}</button>

    React does a few special things under the hood when we pass a function to action:

    1. We do not need to worry about calling event.preventDefault(), React does this automatically if a function is passed to action
    2. The action function will receive FormData as a parameter, so we do not need to construct form data ourselves via new FormData(event.target)
    3. Uncontrolled input components within the <form> will be reset upon action success

    That's useful, but do we still have to maintain the pending and error state variables ourselves? Not at all, React also has a solution for them. These issues are addressed by the introduction of new hooks – useActionState and useFormStatus. Let's look at these two new hooks.

    useActionState hook

    The useActionState hook helps make the common cases easier for Actions. useActionState hook accepts multiple parameters:

    • actionFn: A function which will be used as action for the form. actionFn accepts two parameters: previousState and formData
    • initialState: Value to be used as the initial state. It is ignored after the action is first invoked
    • permalink (optional): A string containing the unique page URI that this form modifies

    The useActionState hook returns an array containing two values:

    • formState: A value which will be derived from return value of action function. Defaults to initialState
    • formAction: Reference to action function which was passed to the <form>'s action
    const [state, formAction] = useActionState(actionFn, initialState);

    Let's rewrite our earlier form example using the useActionState hook:

    import { useActionState } from 'react';
    async function createUserAction(prevState, formData) {
    try {
    await fetch('/user', {
    method: 'POST',
    body: JSON.stringify({ name: formData.get('name') }),
    } catch (err) {
    return {
    success: false,
    message: err.message,
    return {
    success: true,
    message: 'User created successfully!',
    export default function UserForm() {
    const [formState, formAction] = useActionState(createUserAction, null);
    return (
    <form action={formAction}>
    <input id="name" name="name" />
    {formState?.success === true && (
    <p className="success">{formState?.message}</p>
    {formState?.success === false && (
    <p className="error">{formState?.message}</p>
    <button type="submit">Save</button>

    A little better! We no longer need a state just for the error message, it is now part of the action state. Astute readers will notice that this new example does not handle the pending/loading states. That's where the useFormStatus hook comes in.

    useFormStatus hook

    The useFormStatus hook provides status information of the last form submission, which can be used by components to render pending states (e.g. loading indicators, disabling buttons and inputs).

    It does not accept any parameters and returns a status object with the following properties:

    • pending: A boolean value that indicates whether the parent <form> is pending submission
    • data: A FormData object containing data of the parent <form>. It is null if there is no submission or no parent <form>
    • method: A string value of either get or post. This tells us whether the form is getting submitted using GET or POST
    • action: A reference to the action prop on the parent <form>. It is null if there is no parent <form> or if a string URI value provided to the action prop
    const { pending, data, method, action } = useFormStatus();

    Using the useFormStatus hook comes with a caveat – useFormStatus() will only return status information for a parent <form>. It will not return status information for any <form> rendered in that same component or children components. Hence the useFormStatus hook must be called from a component that is rendered inside a <form>.

    Let's rewrite our example to use useFormStatus for handling pending states:

    import { useActionState } from 'react';
    import { useFormStatus } from 'react-dom';
    async function createUserAction(prevState, formData) {
    try {
    await fetch('/user', {
    method: 'POST',
    body: JSON.stringify({ name: formData.get('name') }),
    } catch (err) {
    return {
    success: false,
    message: err.message,
    return {
    success: true,
    message: 'User created successfully!',
    // In order for `useFormStatus` to work we have to extract the button
    // into a separate component so the <form> is now a parent component.
    function SubmitButton() {
    const { pending } = useFormStatus();
    return <button type="submit">{pending ? 'Saving...' : 'Save'}</button>;
    export default function UserForm() {
    const [formState, formAction] = useActionState(createUserAction, null);
    return (
    <form action={formAction}>
    <input id="name" name="name" />
    {formState?.success === true && (
    <p className="success">{formState?.message}</p>
    {formState?.success === false && (
    <p className="error">{formState?.message}</p>
    <SubmitButton />

    In order for useFormStatus hook to work, we have to extract the <button> into a separate component so the <form> is now a parent component.

    By using the new useActionState and useFormStatus hooks:

    • There is no need to manually maintain pending status. We can utilize the pending field from the return value of useFormStatus. There is no need to do prop drilling or use context for passing the pending state.
    • The returned state can contain success and error fields from the action function and be used to display success and error messages.

    React Actions gotchas

    • When a <form> action succeeds, React will automatically reset the form for uncontrolled components. If you need to reset the <form> manually, a new requestFormReset React DOM API is available.
    • When a function is passed as the action or formAction props of <form>, <input>, and <button> elements, the HTTP method will be POST regardless of the value of the method prop.
    • The action prop can be overridden by a formAction prop on a <button> or <input> component as these support the formAction prop.


    The new React Actions, along with the useActionState and useFormStatus hooks provide apps with a new way to write form submissions in React efficiently and can easily manage the form's pending, success, and error states.

    Say goodbye to form boilerplate code!

  • Implementing Code Splitting and Lazy Loading in React

    Learn how to implement Code Splitting and Lazy Loading in React and it's importance.

    Nitesh Seram
    8 min read
    Jun 3, 2024

    Implementing Code Splitting and Lazy Loading in React

    As Front End Engineers, we aim to deliver the best user experience and one of the ways to achieve that is by optimizing the applications' performance.

    Users expect fast, responsive experiences, and will quickly abandon sites that are slow to load. Studies show that if a web page takes more than 3 seconds to load, over 40% of users will leave. With the prevalent usage of mobile devices which can be on slower network speeds, optimizing performance is critical.

    Code splitting and lazy loading are effective strategies to achieve great performance on the web. In this post, we’ll explore these techniques, their benefits, and how they can be implemented in React.

    Introduction to Code Splitting and Lazy Loading

    Code splitting breaks down your application into smaller chunks, loading only the necessary parts to reduce the bundle size. Lazy loading defers loading non-essential resources until they’re needed, further enhancing performance.

    For example, consider a React app with a Login, Dashboard, and Listing page. Traditionally, the code for all these pages are bundled in a single JS file. This is suboptimal because when the user visits the Login page, it is unnecessary to load pages such as the Dashboard and Listing page. But with implementing code splitting and lazy loading, we can dynamically load specific components/pages only when needed, significantly improving performance.

    In React, code splitting can be introduced via dynamic import(). Dynamic import is a built-in way to do this in JavaScript. The syntax looks like this:

    import('./math').then((math) => {
    console.log(math.add(1, 2));

    For React apps, code splitting using dynamic imports is supported out of the box via React.lazy if a boilerplate like create-react-app is used. The React.lazy() function lets you render a dynamic import as a regular component. This feature was introduced in React 16.6 which allows lazy loading of components via splitting a big JS bundle into multiple smaller JS chunks for each component that is lazily loaded.

    However, if a custom Webpack setup is used, you must check the Webpack guide for setting up code splitting.

    Implementing in React

    To implement lazy loading in React, we can leverage React.lazy function and the Suspense component to handle loading states. Here's an example demonstrating lazy loading in React:

    const LazyComponent = React.lazy(() => import('./LazyComponent'));
    function App() {
    return (
    <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />

    By wrapping a lazy-loaded component with Suspense, we can provide a fallback/placeholder UI while the component is being loaded asynchronously, such as a spinner.

    However, there can be a case where LazyComponent fails to load due to some reason like network failure. In that case, it needs to handle the error smoothly for a better user experience with Error Boundaries.

    import MyErrorBoundary from './MyErrorBoundary';
    const LazyComponent = React.lazy(() => import('./LazyComponent'));
    function App() {
    return (
    <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />

    So, when the LazyComponent is lazily loaded, it signifies that the code for LazyComponent is segmented into a distinct JS chunk, separate from the main JS bundle. This JS chunk is exclusively loaded when the LazyComponent is required to be displayed on the user interface, optimizing the loading process and enhancing the application's performance.

    Note: React.lazy and Suspense only work on the client side and are not available for server-side rendering. For server-side code splitting, the loadable/component library can be used.

    From the above, we have seen how we use React.lazy to code split and lazy load components. But the question is where to lazy load and code split. There are approaches like Route-based code splitting and Component-based code splitting.

    Route-based code splitting

    Route-based code splitting

    Route-based code splitting is almost always the best place to start code splitting and it is also where we can achieve potential max size reduction of our JS bundle. It works best when the routes are very distinct and there is very little code duplication between the routes because if it does there will be duplicate codes in all the JS chunks of lazily-loaded routes. When we try to lazily load all the routes in our app, there is a chance of code duplication in the output bundles. Hence we need to be careful about this when we do code splitting at route level.

    Here is an example of route-based code splitting:

    import { Suspense, lazy } from 'react';
    import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
    const Login = lazy(() => import('./Login'));
    const Dashboard = lazy(() => import('./Dashboard'));
    const App = () => (
    <Route path="/" element={<Login />} />
    <Route path="/about" element={<Dashboard />} />

    Component-based code splitting

    Component-based code splitting

    Component-based code splitting provides granular control over loading specific components, allowing for more precise optimization. The real power of code splitting comes into the picture in component-based code splitting where we have more control over granular components. When deciding which components to lazy load, consider the importance and impact of each component on the initial rendering and user experience. Ideal candidates for lazy loading are large components with significant code or resources, conditional components that are not always needed, and secondary or non-essential features. These can be segmented into separate chunks and loaded on demand, optimizing performance. However, critical components like headers, main content, and dependencies should be loaded upfront to ensure a seamless user experience. We need to be careful in selecting which components to lazy load to strike a balance between initial load times and providing essential functionality. Here is an example of component-based code splitting:

    import { useState, lazy, Suspense } from 'react';
    const Modal = lazy(() => import('./Modal'));
    function App() {
    const [showModal, setShowModal] = useState(false);
    const openModal = () => {
    const closeModal = () => {
    return (
    <button onClick={openModal}>Open Modal</button>
    {showModal && (
    <Suspense fallback={<div>Loading Modal...</div>}>
    <Modal onClose={closeModal} />
    export default App;

    In this example, the Modal component is lazily loaded using React.lazy() and dynamically imported. The modal is conditionally rendered based on the showModal state, which is toggled by the openModal and closeModal functions. The Suspense component displays a loading indicator while the modal component is being loaded asynchronously. This implementation optimizes performance by loading the modal component only when the user interacts with the Open Modal button, preventing unnecessary loading of heavy components like a text editor until they are actually needed.

    Webpack magic comments

    If you’re using Webpack to bundle your application, then you can use Webpack's magic comments to further improve the user experience with lazy loading.

    We can use webpackPrefetch and webpackPreload for dynamic imports. In the above example of the lazy loading Modal, the Modal is loaded only when the user clicks the Open Modal button and the user has to wait for a fraction of a second to load the Modal.

    We can improve the user experience by not making users wait for the Modal to load. So, in that scenario, we can prefetch or preload the Modal component. In the above example of the Lazy loading modal, the only difference will be in how we import the Modal component.


    const Modal = lazy(() => import('./Modal'));


    const Modal = lazy(() => import(/* webpackPrefetch: true */ './Modal'));

    What webpackPrefetch: true does is that it tells the browser to automatically load this component into the browser cache so it's ready ahead of time and the user won’t have to wait for the Modal component to load when the user clicks on the Open Modal button.

    We can use webpackPrefetch and webpackPreload for a particular component when we think that there is a high possibility for the user to use that component when a user visits the app.

    When to use code splitting and lazy loading?

    Use code splitting and lazy loading when:

    • Your application is large and complex, with many components and dependencies.
    • Components are not needed on the initial page load (e.g. below-the-fold, only after interaction).
    • You want to reduce the initial bundle size.
    • Certain components are conditionally rendered or used in specific scenarios.

    Avoid code splitting and lazy loading when:

    • Your application is small and simple, with minimal components.
    • The overhead of managing code splitting outweighs the benefits.
    • Critical components are always needed on the initial load.


    Be sure to assess your application's requirements, tech stack and challenges when deciding the code splitting and lazy loading approach. By strategically dividing code and loading resources on demand, you can create fast, efficient, and engaging web applications.

  • Announcing GreatFrontEnd Projects – A real world projects platform for front end engineers

    Build real world projects to learn with hands-on practice, or to stand out with an awesome portfolio.

    Yangshun Tay
    10 min read
    Apr 30, 2024

    Announcing GreatFrontEnd Projects – A real world projects platform for front end engineers

    After months of working hard on this, we are thrilled to finally announce the beta launch of GreatFrontEnd Projects! 🥳️

    At GreatFrontEnd, we strive to create a platform for front end engineers to learn, grow and connect with one another.

    Through scouring countless forums frequented by front end engineers and speaking to our users, we've discovered a common need for a platform where you can develop well-crafted real-world projects – be it to learn something new through hands-on practice, or to build up your portfolio of projects.

    We wanted to build the very best version of such a platform while listening to your needs. We believe we are close to achieving this, and we're excited for you to experience it firsthand.

    What exactly is GreatFrontEnd Projects?

    GreatFrontEnd Projects is a platform for front end engineers to build real-world projects.

    In essence, we provide you with tons of real-world project challenges that you can build.

    For each challenge, you'll have access to everything you need to start coding right away – including professional designs, API specs, starter code and image files.

    Access to Everything Needed

    Just click "Start project", open up your IDE and start coding!

    After you're done, host your project on any service and submit your GitHub repo and site url. This will be published for other users to give you code reviews and feedback.

    Submission Page

    We will pull your code from GitHub directly onto the platform for instant code reviews by the community, allowing you to receive feedback for your work and gain experience points ("reputation") to track your progress.

    Code Review

    By using the platform, you can:

    • Learn: Learn new skills through hands-on practice
    • Showcase: Build portfolio-worthy projects like no other.
    • Build faster: Accumulate a toolkit of reusable components for future personal projects.

    Budget-savvy users will also be happy to know that we are predominantly free, with 80% of our challenges accessible for no cost. We believe in providing the basics for free, including multi-page apps and breakpoint management. You won't be charged for essential features like taking screenshots.

    Our premium charges only apply to advanced features that go beyond the basics, offering an extra boost to your learning and development. Find out more →

    Why should you use GreatFrontEnd Projects?

    1. Designed to help you learn any front end skill faster

    Whether you're a complete beginner hoping to learn front end from scratch, or a senior engineer hoping to learn more modern stacks, our platform was designed to assist you in your learning goals.

    Beginner-friendly to nightmare-level challenges.

    We offer a range of starter level challenges that are specifically designed for beginners. You can begin with these and gradually progress to more advanced challenges as you gain confidence and experience.

    Different Levels

    Extensive learning resources while building

    As you embark on each challenge, you'll have access to a wealth of resources to support your learning journey. These include detailed guides, solutions, references from fellow users, and community forums. These resources are carefully curated to assist you in understanding and mastering the concepts behind each challenge.

    While other platforms might leave you relying solely on community feedback, our premium plan provides you with practical development guides and solutions written by experienced senior engineers from top tech companies. You'll learn best practices and supercharge your learning by referencing professionally-written code derived from years of experience.

    Complete beginners will also be happy to find guides to help you get started with the very basics, such as starting up your IDE and code repository, or building UI with figma.

    Guides and Solutions

    Every project builds specific skills

    Every challenge on our platform is detailed with the skills that you would be able to learn after building them. Starting from the simplest challenges, you may find yourself learning basic HTML and CSS. As you move along, you start to learn more advanced skills, such as using UI frameworks like React or Svelte.

    Structured learning with skills roadmap

    Specific Skills

    We also offer a skills roadmap on our platform, which serves as a step-by-step guide to acquire all the fundamental skills required for front-end development, from the very basics to advanced topics.

    Recommended Projects

    For each skill, it provides you with a list of curated resources, as well as a recommended order of projects to build.

    Feedback and code reviews

    After completing a project, you'll have the opportunity to receive feedback and code reviews from the community. This feedback is invaluable for your growth as it helps you identify areas for improvement and refine your coding skills.

    We make code reviews easy by displaying your code directly on our platform, eliminating the need for community members to go elsewhere to review your work. This convenience encourages more feedback and collaboration, which means you can expect to receive more feedback for your work.

    Community Feedback

    Gamification and progress tracking

    Our platform includes an advanced gamification system that encourages you to track your progress and take on more challenges. Every productive action you undertake towards building projects or learning new skills will be rewarded with reputation points, continuously motivating you to stay engaged and make steady progress in your learning journey.

    Gamification System

    Real world project specs

    Our projects were designed with real world project specs meant for professional software engineers. This includes project specs and user stories written by professional product managers, and fully specified UI UX designs by high-end designers.

    This means that whatever you build from day 1 will resemble the kind of work you would be expected to do in a full-time front end engineer job. Moreover, you can be sure that every project you spend time building will form a professional application that can be reused for future projects, or used as part of your portfolio. Learn while building something useful!

    Project Specs

    2. The most impressive collection of portfolio projects in the market – without building the same as others

    If you're looking to build your portfolio – we've built our platform to ensure that you are well taken care of.

    Professional designs by high-end designers

    For developers seeking to build their portfolios or embark on side projects, our platform allows you to build stunning portfolio projects that were professionally designed by high-end designers. Design is hard – and you'd be able to focus solely on the technical execution.

    Professional Designs

    Personalized portfolio projects

    Furthermore, unlike other challenge platforms, you'd be able to easily construct personalized portfolio projects instead of building the same thing as everyone else.

    Each project within our platform is made up of reusable components which adhere to the same design system, making them inherently modular and compatible with one another. This means you can seamlessly combine components from various projects to construct unique and customized applications for your portfolio. These components cover a diverse range of applications, including Marketing, E-Commerce, Web Apps, Games, and even Portfolios, which means you'd be able to compose a wide variety of apps from them.

    Personalized Projects

    Build entire component libraries or design systems to impress recruiters

    Additionally, we offer Component Tracks, which are collections of projects that form component libraries or design systems. This can leave a strong impression on potential employers and recruiters, showcasing your expertise and versatility in building a variety of components for common use cases, which is much more impressive than building individual projects.

    Component Tracks

    3. Every challenge is a reusable, modular component that add to your permanent toolkit for future projects

    Reusable Component

    If you enjoy dedicating your spare time to creating side projects, our platform will be beneficial for you as well. Each challenge you complete contributes to a growing collection of professionally designed, reusable components, allowing you to seamlessly integrate them into any of your personal side projects.

    What are the differences between Free and Premium?

    We provide all of the essentials for free. You will be able to complete 80% of our challenges and even some advanced features that other platforms make premium, such as multi-page apps, breakpoint management and screenshot taking.

    Here are the advanced features you can enjoy as a Premium member:

    1. Access to practical development guides and official solutions

    Each guide and solution was written by big tech senior engineers with best practices derived from years of experience, allowing you to learn techniques and patterns early on in your learning, setting up for a strong foundation.

    2. Access to professionally designed figma files

    Learning how to use design tools like Figma is an important skill for any professional front end developer. Moreover, using the design file helps you in building a more precise solution using design details like font sizes, spacing and colors, eliminating the time that would otherwise be spent on guesswork.

    3. Access to the entire skills roadmap

    Without knowing the domain well, it's hard to know which projects you should build in order to train different aspects of a skill. Our skills roadmap solves that problem by providing a structured roadmap of projects to build to train all the core skills required for front end engineers, all the way from beginner to advanced. While the free plan lets you access only the foundational skills in the skills roadmap, you will get full access to all nodes in the skills roadmap once you purchase any premium plan. This helps you learn skills efficiently without the guesswork.

    4. Access to all component tracks

    Our component tracks are a unique feature where each track is a collection of projects that form a component library or even design system. By building entire component tracks, you showcase your abilities and versatility in building a variety of components for common use cases, which is much more impressive than building individual projects. Moreover, one of our component tracks is a design system, which means you get to build the underlying design system behind all of the projects on our platform, serving as a good foundation for your toolkit of reusable components.

    5. Access to our most impressive projects

    Some of our most impressive projects were designed to teach you (and allow you to showcase) complex and / or modern techniques like full stack or artificial intelligence skills. These are the projects you'd want to reference when building your portfolio to stand out from the crowd of applications.

    With these premium features, you'll save considerable time and effort towards building accurate designs and becoming a highly skilled front-end developer.

    Refer to our pricing plan here for a free vs premium comparison table →

    Beta testers, attention!

    With our Beta launch underway, we're eager to collect insights from our beta testers to enhance our platform further. Should you wish to report a bug or propose new features, feel free to reach out via email at feedback@greatfrontend.com or share your thoughts through our feedback widget ("Chat with us!" on the side of the page).

    Thank You

    This was a significant milestone for such a huge project spanning several months. We would like to express our gratitude to the team that helped make this happen, including:

    • Yangshun Tay for leading the engineering design and efforts, as well as all the engineers who contributed directly to the project – Nitesh Seram, Vikas Yadav, Neo Wei Qing, and Jeff Sieu.
    • Fariz Maulana for leading the very challenging design efforts on the projects platform and projects challenges, as well as designers Chew Kia Hwee, Layo Studio, and Tay Yang Heng.
    • Gina Ng for leading the product planning and roadmap, as well as project managing and Feilin Liangga Putri for QA testing the platform.
    • Nikki Gunarso and Seth Gerald for leading the marketing efforts for product launch.
    • All the community members for making valuable code contributions, improving our documentation, and answering questions on Discord.
  • Front End Performance Techniques

    Improve your website's speed and user experience through these front end performance techniques.

    Feilin Liangga Putri
    6 min read
    Mar 26, 2024

    Front End Performance Techniques

    A good website is not only just about aesthetic user interface, optimizing its front end performance is equally as important, and in certain domains like e-commerce, checkout conversion performance is highly dependent on website performance.

    This article presents a collection of underutilized yet effective strategies that you can use to improve your website's speed and user experience. These are useful concepts to know for front end system interviews as well as for your day-to-day work!

    List virtualization

    List virtualization is an optimization technique where only the currently visible items in a long list or large dataset are rendered. This method dynamically loads and unloads elements based on the scroll position.


    • Reduce memory usage
    • Reduce initial load time and subsequent
    • Smoother scrolling and interaction, as the browser is not overloaded


    1. Install a virtualization library like react-virtualized.
    2. Wrap list in the virtualization component.
    3. Set the item count and provide a function to render each visible item based on the scroll position.


    Bundle/code splitting

    Both bundle and code splitting are optimization techniques in web development that involve dividing a large codebase into smaller chunks, loading only the necessary chunks at any point of time. This can significantly enhance the performance and efficiency of applications, especially those with extensive codebases or complex dependencies.


    • Allow browsers to cache parts of the application independently, reducing the need to re-fetch unchanged code
    • Faster load times and smoother and more responsive application


    1. Use a bundler like Webpack or Vite.
    2. Identify split points (e.g., routes or features).
    3. Use import() for dynamic imports at these points.


    Dynamic imports / lazy loading

    By implementing dynamic imports, we import code only on interaction, visibility, or navigation. Similar to that, lazy loading is also a popular design pattern that delays the initialization of an object until when it is actually needed by users. These can help to improve efficiency, especially at times where costly resources are not always utilized.


    • Reduce initial load time
    • Save bandwidth as unnecessary code or resources are not loaded upfront
    • More responsive applications as the browser's workload is much less


    1. Identify components for lazy loading.
    2. Replace their imports with dynamic import() calls.
    3. Use placeholders while components load.


    Optimize loading sequence

    Optimal loading sequence prioritizes the loading of essential resources, like CSS, fonts, and above-the-fold content. This method carefully orders the loading process, so critical elements are rendered first, enhancing perceived performance. By doing this, non-essential items are deferred, largely boosting efficiency and user satisfaction, especially during page initialization.


    • Faster perceived load time
    • Efficient use of network and browser resources by loading only what's essential upfront, leading to streamlined resource utilization


    1. Identify critical resources for the initial view.
    2. Use <link rel="preload"> for these resources in the HTML head.
    3. Lazy load non-critical resources.



    Through the prefetching technique, resources are loaded in the background before they are requested by users. This strategy aims to reduce perceived latency and improve responsiveness by fetching resources ahead of time, based on user behavior patterns or predictive algorithms.


    • Reduce latency
    • Smoother transition between pages or actions
    • Ensure resources are ready before they are needed


    1. Identify resources for future use.
    2. Use <link rel="prefetch"> to instruct the browser to load these in idle time.
    3. Monitor and adjust based on user behavior.



    Preloading is where specific resources are identified and loaded early in the page's life cycle, even before the browser requires them. This ensures that critical assets such as scripts, stylesheets, and images are readily available by the time they're needed.

    Unlike prefetching, which depends on future navigation, preloading focuses on the current page, strategically accelerating the availability of high-priority resources that are crucial for the immediate next steps. This is particularly useful for resources that are essential for the initial view or interactive features of a page, ensuring a smoother and faster user experience.


    • Immediate availability of critical resources
    • Enhance performance and improve reliability of critical resources loading process


    1. Determine essential resources for the next steps.
    2. Use <link rel="preload"> for these resources, specifying the type with as.



    Compression is a method that reduces file sizes for faster user delivery by eliminating redundant data. This not only quickens load times for web pages and apps but also cuts down on bandwidth and associated costs, similar to how tree shaking, which will be explained below, removes unused code to streamline bundles.


    • Faster data transfer
    • Reduce bandwidth consumption
    • Lower costs


    1. Enable compression on the web server (e.g., Gzip, Brotli).
    2. Compress static assets during the build process.
    3. Ensure compressed files are served with correct headers.


    Tree shaking

    Tree shaking is an optimization technique used to eliminate unused code from the final bundle before deployment. By analyzing the import and export statements in a module structure, static analysis tools can determine which modules and lines of code are not being utilized and remove them.


    • Smaller bundles enhance load times and performance, using fewer resources overall
    • Better maintainability with a cleaner codebase


    1. Use a bundler that supports tree shaking (e.g., Webpack).
    2. Write code in ES6 modules.
    3. Enable production mode in the bundler to remove unused code.


    Front end performance cheatsheet

    Optimizing front end performance is important in providing a fast, efficient, and enjoyable user experience. Techniques mentioned above are often powerful yet often underutilized. By carefully implementing these strategies, we can ensure that our applications perform optimally, keeping users engaged and satisfied.

  • Top 5 CSS Mistakes made by Front End Engineers

    5 most common CSS mistakes Front End Engineers make and how to avoid them.

    Jordan Cutler
    10 min read
    Mar 5, 2024

    Top 5 CSS Mistakes made by Front End Engineers

    This is a guest post by Jordan Cutler, Senior Frontend Engineer at Pinterest and author of the High Growth Engineer Newsletter.

    I've seen a lot of CSS.

    Unfortunately, there aren't great resources on doing it right.

    In my experience as a Senior Frontend Engineer, I see 5 common mistakes that I'll go over in this article and how to avoid them.

    Recognizing and avoiding these mistakes will help you write CSS that:

    1. Works across devices—not just your laptop
    2. Works the first time you try it
    3. Makes you less frustrated with CSS

    Let's dive in!

    Mistake 1: Using width and height properties incorrectly

    One of the most common mistakes comes at the cost of responsiveness.

    It's the overuse of width and height.

    Luckily, there are easy fixes to this.

    In general:

    • Use max-width alongside width
    • Swap height for min-height

    Using width and height can be ok in certain scenarios. If you are using them, you should know what you're doing and be cautious.

    Some examples where width and height make more sense:

    • An icon that should only be displayed at a particular fixed size.
    • A fixed element on the page, like a sticky nav, footer, or sidebar.
    • A set of elements that you want to become scrollable if the screen is too small by also setting overflow: auto on their parent.

    HTML is responsive by default. Our CSS is what often breaks the responsiveness. When we add styles, we need to keep our page responsive.

    Using width and height is dangerous because they are restrictive.

    It says: "You must be this size no matter what."

    For example: If we use width: 900px on an element, what happens if we are on mobile?

    It would overflow off the screen.

    CSS element overflow

    If you do need to use a fixed width value, make it flexible. My preferred way for doing that is adding max-width: 100% .

    CSS element max width

    A common example I see in the real world is defining a fixed width value on <input> elements.

    Here's what it looks like when an <input> is 400px inside a container that was shrunk to 250px.

    CSS input width exceed container

    Once we apply max-width: 100% the issue goes away.

    CSS input max width

    Similarly, we run into the same issue with height.

    If we define a fixed height: 250px and our content size is greater than 250px, we see this happen:

    CSS height exceed container

    However, the fix is easy. We can use min-height: 250px instead.

    Now, our container will always be at least 250px, but can become larger if it needs to fit the content inside.

    CSS height min height

    Mistake 2: Misunderstanding "layout elements" and "content elements"

    CSS is often considered difficult to maintain.

    A large reason for this is mixing responsibilities in CSS.

    In the same way that you don't want a function to be doing 10 different things, we can apply that principle to our CSS.

    How? By dividing each element we apply CSS to into either a "layout element" or a "content element."

    Here are examples of content elements:

    • A button
    • A text input
    • A paragraph
    • A link in the navbar
    • A card

    Essentially, they are isolated items that hold content.

    In comparison, "layout elements" define the layout those "content elements" should be placed in.

    They define the structure via flexbox, grid, gap, and margin.

    Layout elements are all the elements you don't see.

    Here's an example:

    Let's look at the Tailwind landing page and see how it is structured by adding a border: 1px solid red to everything.

    Tailwind border red

    You can already start to see where the "content" elements are vs the "layout elements." The content elements are the buttons, text inputs, paragraph text, icon buttons in the navbar, etc.

    Let's focus on the bottom row with the "Get started" button:

    Tailwind get started

    The "Get started" button and "Quick search" input are wrapped in a <div> which is the layout element.

    It defines display: flex, margin-top, and justify-content: center.

    With that, it created the skeleton where content elements can just be plopped into the correct location.

    In your CSS, you should aim to use this pattern too.

    A common mistake would be applying margin-top on one or both of these buttons, rather than letting the layout element do it.

    Mistake 3: Choosing between padding, margin, gap incorrectly

    Question: In the below image, would you use padding, margin, or gap to add space between these tags?

    Tags layout

    Hopefully, your answer is gap.

    Often, I see something like:

    .tag {
    margin-left: 8px;
    .tag:first-child {
    margin-left: 0;
    <div class="tag">All</div>
    <div class="tag">Music</div>
    <div class="tag">JavaScript</div>
    <div class="tag">Sales</div>

    While this "works", it breaks separation of responsibilities.

    The .tag should just be concerned with rendering itself and its content.

    Instead, we can do:

    .tagRow {
    display: flex;
    gap: 8px;
    .tag {
    // The CSS that controls the tag appearance
    <div class="tagRow">
    <div class="tag">All</div>
    <div class="tag">Music</div>
    <div class="tag">JavaScript</div>
    <div class="tag">Sales</div>

    This defines a wrapper around the .tags. Any element inside that tag wrapper will receive a space around them that is 8px wide. The .tag doesn't know anything about and should not bother with the context it's in. It's just a tag being placed in a pre-defined layout.

    What about padding?

    Think of padding as bubble wrap inside a package. It's part of the package, but not the contents.

    Padding is just whitespace that is part of the element itself and prevents the content from being too tightly packed.

    Padding gets applied to "content elements."

    What about margin?

    Think of margin as a restraining order. You have to be a minimum distance away.

    I don't like to apply margin to "content elements."

    Instead, I create a wrapping element that applies the margin.

    For example, let's say we have a button at the bottom of a form like this:

    <input />
    <input />
    <button type="submit">Submit</button>

    If we want to add a minimum amount of space above the button and any other content, I'd create a wrapper div around the button to apply that margin.

    <input />
    <input />
    <div class="submitButtonWrapper">
    <button type="submit">Submit</button>
    .submitButtonWrapper {
    margin-top: 16px;

    Technically, you could add the margin to the submit <button> directly. I don't prefer this though.

    In practice, your buttons will usually be abstracted away in a component library that usually prevents style overrides—for good reason.

    By creating this wrapper element, the separation of responsibilities is clearer.

    One more note for a good use of margin: Typography elements.

    Headings and paragraphs are good uses of margin, since there will usually be varying amounts of spacing between these and they usually aren't wrapped in a container where gap makes sense.

    Mistake 4: Not knowing about layout modes

    Let's say we have 2 <div> elements and some CSS like this:

    div {
    width: 100px;
    height: 100px;
    .blue {
    z-index: 5000;
    background-color: blue;
    .red {
    z-index: 4000;
    background-color: red;
    // Just to get both divs on top of each other
    margin-top: -100px;
    <div class="blue"></div>
    <div class="red"></div>

    Do you know which one will be displayed on top?

    The answer is… red.


    If you answered blue, you might have thought it was because the z-index of the .blue div was higher.

    While that is true, z-index isn't doing anything here.

    It's not doing anything because z-index only works in certain "layout modes."

    Because it isn't doing anything, the element that appears in the DOM later is rendered at the top. In this case, since the .red div element comes later, it will appear above the other.

    How do we fix this?

    The default layout mode for most elements is called "flow".

    z-index isn't implemented in the "flow" layout mode.

    The MDN docs call this out in the position: static area which is the default for elements.

    MDN CSS position static

    But it is implemented in "positioned" layout mode.

    MDN CSS positioning

    To enter positioned layout for an element, we can apply position: relative, position: absolute, position: fixed, or position: sticky

    In this case, the easiest way to get z-index to work is to use position: relative.

    div {
    width: 100px;
    height: 100px;
    .blue {
    position: relative;
    z-index: 5000;
    background-color: blue;
    .red {
    position: relative;
    z-index: 4000;
    background-color: red;
    // Just to get both divs on top of each other
    margin-top: -100px;
    <div class="blue"></div>
    <div class="red"></div>

    Since both elements are in the "positioned" layout mode, z-index will work and the .blue div will be displayed on top.

    You probably knew this without realizing it

    If you've instinctively used gap only when you add display: flex or display: grid, you probably knew this without realizing it.

    Why don't you just add gap without adding display: flex ?

    Because gap isn't implemented in the default layout mode—flow.

    But it is in the "flex" layout mode! Which you get when you do display: flex.

    Some more quick examples

    • Using top, left, right, bottom only works in "positioned" layout mode.
    • Margin collapsing only works in "flow" layout mode.
    • grid-template-areas only works in "grid" layout mode.

    Mistake 5: Using only grid or only flex

    The final common mistake is overusing only display: grid or only display: flex.

    Although many display: flex cases can use display: grid and vice-versa, each of these excel in their own areas.

    CSS Grid is great for 2-dimensional layouts. I often see good CSS grid use cases when building a page-level layout structure.

    For example, Una Kravetz shares how to build the classic holy grail layout using CSS Grid.

    CSS holy grail layout using grid

    .parent {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
    header {
    grid-column: 1 / 4;
    .left-side {
    grid-column: 1 / 2;
    main {
    grid-column: 2 / 3;
    .right-side {
    grid-column: 3 / 4;
    footer {
    grid-column: 1 / 4;

    Flexbox is great for stacking items side by side or on top of each other in 1 dimension.

    A great example of this is something like nav items that should be equally spaced apart.

    Here is an example on Tailwind's home page.

    Tailwind nav gap CSS

    Here's one more example on Airbnb.

    Airbnb nav gap CSS

    In general, I use Flexbox more than CSS Grid, but they both have their use cases and its important to use the correct one for your use case.

    To learn more about Flexbox and CSS Grid on a fundamental level, I recommend Josh Comeau's Interactive Flexbox Guide and his Interactive CSS Grid Guide.


    CSS Mistakes List

    These are the top 5 CSS mistakes I've seen in my experience, but I'm sure there are others we can all learn from.

    If you have other mistakes you see the most, feel free to drop me a DM on LinkedIn.

    You can also check out my newsletter, High Growth Engineer, where I share how to grow faster as a software engineer to 50k+ engineers weekly.

    See you there!

  • Top Headless UI libraries for React in 2024

    Explore some of the best headless UI libraries for React in 2024.

    Feilin Liangga Putri
    4 min read
    Feb 29, 2024

    Top Headless UI libraries for React in 2024

    Headless UI libraries are a modern trend in web development that focus on providing the underlying logic and functionality for UI components without prescribing a specific visual style. This approach allows developers to build fully accessible UI components according to their design systems without being tied to any predefined styles or aesthetics.

    Radix UI

    Radix UI homepage

    Radix UI, an open source component library, prioritizes fast development, easy maintenance, and accessibility. With 32 components available, it streamlines development by removing the need for configuration, allowing developers to quickly incorporate its components into their projects.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~13.5k
    • Npm weekly downloads: ~1,345,900
    • No. of components: 32

    Headless UI

    Headless UI homepage

    Next, Headless UI provides completely unstyled and fully accessible UI components.The diverse array of elements in Headless UI is meticulously crafted to function effectively within the system, making it an excellent option for individuals who prioritize developing custom, inclusive interface designs with a distinct visual aesthetic.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~23.6k
    • Npm weekly downloads: ~1,300,810
    • No. of components: 10

    React Aria

    React Aria homepage

    React Aria is a library of React Hooks that provides accessible UI primitives for your design system. There are over 40 components with built-in behavior, adaptive interactions, accessibility, and internationalization, ready for your custom styles. It provides an excellent user experience, notably with functions such as screen reader assistance, keyboard controls, focus handling, language translations, and additional features.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~11.1k
    • Npm weekly downloads: ~116,538
    • No. of components: 35

    Aria Kit

    Aria Kit homepage

    In addition, Aria Kit is an open-source library that provides unstyled, primitive components for building accessible web apps, design systems, and component libraries with React. It contains a collection of components that handle accessibility, state management, and keyboard interactions, while leaving the styling and composition to the user.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~7.5k
    • Npm weekly downloads: ~53,787
    • No. of components: 25

    Ark UI

    Ark UI homepage

    Ark UI is a headless library known for building reusable, scalable design systems that works for a wide range of JS frameworks. The components are unstyled, declarative, accessible, and reliable, allowing for a delightful development experience. It supports multiple platforms and applications, helps create a consistent design system across them and uses state machines to ensure predictable and bug-free behavior in every component.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~2.8k
    • Npm weekly downloads: ~29,155
    • No. of components: 37

    Reach UI

    Reach UI homepage

    Furthermore, Reach UI is a collection of accessible, React-based UI components for building design systems. This prioritization of accessibility results in user-friendly components that enhance inclusivity in web applications. Reach UI's components adhere to accessibility best practices, simplifying the process for developers to build applications suitable for all users, including those who depend on assistive technologies.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~5.9k
    • Npm weekly downloads: ~42,685
    • No. of components: 15

    Headless UI Libraries List

    The headless UI library ecosystem for React showcases a vibrant collection of tools designed to meet a wide range of web development needs. From accessibility and ease of use to customization and scalability, each library offers distinct advantages, reflecting the industry's shift towards more adaptable and inclusive web design practices. As web development continues to advance, the flexibility and user-focused design of headless UI libraries will remain essential for shaping the future of digital interfaces.

  • Top Open Source Design Systems by Tech Companies You Can Use Right Away

    Explore some of the best open source design systems provided by tech companies.

    Feilin Liangga Putri
    6 min read
    Feb 28, 2024

    Top Open Source Design Systems by Tech Companies You Can Use Right Away

    Open source design systems by tech companies provide a wealth of knowledge and insights into best practices, innovative solutions, and collaborative processes between designers and developers. Here are some of our favorite by popular tech companies:

    Gestalt by Pinterest

    Gestalt homepage

    Gestalt by Pinterest is a design system designed to enhance UI consistency and quality. Its set of components and rules are tailored to fit Pinterest's specific look and how it works. It's also great at creating easy-to-use interfaces, paying special attention to making sure everyone can use them easily, no matter their abilities.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~4.2k

    Material Design by Google

    Material Design homepage

    Material Design by Google is a system for design that helps in developing consistent, visually pleasing, and effective UI for various platforms and devices. It includes grid-based layouts, responsive animations, transitions, and many more. All these are made by using a minimalist design approach.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~8.2k

    Blueprint by Palantir

    Blueprint homepage

    Next, Blueprint by Palantir is a collection of reusable components, interactive documentation, and accessibility features for the web, built on React. Its emphasis on growing easily and being interactive makes it especially good for big company apps in fields that need to handle a lot of complex information.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~20.3k

    Polaris by Shopify

    Polaris homepage

    Polaris, created by Shopify, is a design system that assures a consistent user experience on its platform. It has detailed guidelines on various components that follow Shopify's design standards. This allows for it to have easy-to-use and readily available shopping experiences for both sellers and buyers.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~5.6k

    Lightning by Salesforce

    Lightning homepage

    Lightning by Salesforce provides ready-to-use HTML and CSS UI elements that can be used to develop Salesforce experiences. It explains the visual design values and attributes that ensure branding and UI consistency at scale.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~3.5k

    Primer by GitHub

    Primer homepage

    Primer by GitHub contains guidelines, principles, and patterns for designing UI at GitHub, with the aim of ensuring consistency and usability across GitHub's platforms. It includes design guidelines, components, and tools that reflect GitHub's specific needs for collaborative coding environments, which is particularly important to ensure clarity and efficiency in complex interfaces.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~2.9k

    Spectrum by Adobe

    Spectrum homepage

    Spectrum, Adobe's design system, is engineered to enhance user experience across its diverse platforms. By focusing on being flexible and creative, it can become really good at being easy to use and looking great, setting a high bar for how user interfaces should look.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~11.1k

    Carbon by IBM

    Carbon homepage

    Carbon by IBM is an open source design system for products and digital experiences, based on the IBM Design Language. With its comprehensive set of design guidelines and development components, Carbon is designed to facilitate the creation of intuitive and efficient user interfaces, particularly for complex enterprise solutions requiring scalability and integration.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~7.4k

    Ring UI by JetBrains

    Ring UI homepage

    Ring UI by JetBrains is a collection of UI components for web-based products built inside JetBrains or third-party plugins for JetBrains’ products. It's designed to help developers build consistent, responsive, and attractive interfaces quickly. Ring UI emphasizes productivity and user experience, reflecting JetBrains' expertise in development tools.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~3.5k

    Base Web by Uber

    Base Web homepage

    In addition, Base Web by Uber is a React component library that offers a robust suite of components out of the box. It offers an extreme level of customization through the Overrides API and configurable Themes. Its scalability and wide-ranging component library make it appropriate for various web applications, such as large-scale enterprise systems or basic web projects.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~8.6k

    Atlassian Design System

    Atlassian homepage

    Atlassian Design System offers direction, elements, and materials for creating interfaces that match Atlassian's products like Jira and Confluence. It highlights teamwork, variation, and a unique visual design to support Atlassian's dedication to team productivity software.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: -

    Backpack by Skyscanner

    Backpack homepage

    Backpack by Skyscanner consists of design tools, components, and guidelines that focus on providing a positive user experience on the Skyscanner website. Promoting modularity, scalability, and accessibility helps designers and developers quickly develop cohesive and user-friendly interfaces.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: 480

    Fluent by Microsoft

    Fluent homepage

    Fluent by Microsoft is a collection of UX frameworks designed for developing web and mobile applications with the same appearance and function as Microsoft products.It emphasizes on motion and material-inspired interfaces for smooth and intuitive user experiences on Microsoft platforms and devices.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~17.4k

    Protocol by Mozilla

    Protocol homepage

    Finally, Protocol by Mozilla is a design system for Mozilla and Firefox websites that provides a common design language, reusable code components, and high level guidelines for content and accessibility. It prioritizes web standards and open-source principles, making it a versatile choice for web projects aiming for clarity and user-friendliness.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: 251

    Top Open Source Design Systems List

    Design systems from top tech companies that everyone can use are a huge help for both designers and developers. They help make digital interfaces consistent, easy to use, and innovative. Each system has its own special features and ideas, showing how varied and vibrant the tech world is today.

  • Most Useful and Impactful React Ecosystem Libraries

    Explore some of the most useful and impactful React Ecosystem Libraries.

    Feilin Liangga Putri
    5 min read
    Feb 27, 2024

    Most Useful and Impactful React Ecosystem Libraries

    One of the best things about React is the rich ecosystem of libraries and tools that helps developers build apps quickly. Here, we list some enduring and widely favored React ecosystem libraries.


    Next.js homepage

    Next.js, a full-stack React framework, is utilized by some of the biggest companies globally to build top-notch web applications. It offers automatic optimizations, data fetching, routing, server functions, API endpoints, and more, solidifying its position as a robust full-stack React framework.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~119k


    Remix homepage

    Remix is a full stack React framework with a focus on web fundamentals and modern web app UX, enabling developers to build better websites with faster and smoother user experiences. It allows data loading, code splitting, and UI transitions to be handled by the URL segments, resulting in snappy page loads and instant transitions. Furthermore, it supports HTML forms, handles both the server and client side, has built-in error handling, and supports route error boundaries. Its abundance of features allow it to stand-out as one of the most impactful React libraries.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~26.7k

    React Query

    React Query homepage

    Additionally, React Query is a library that provides declarative, always-up-to-date auto-managed queries and mutations for data fetching in React applications. It handles caching, background updates, stale data, and many more with zero-configuration. It simplifies data fetching logic, improves developer and user experiences, supports complex workflows, and works with any backend.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~38.7k


    Docusaurus homepage

    Docusaurus is a react-based static website generator. It includes customization, localization, versioning, search, and dark mode features to improve user experience and aid in documentation creation.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~51.5k

    React Hook Form

    React Hook Form homepage

    React Hook Form allows for better form state management and validation as it is a library for building forms in React with less code and better performance. It offers a feature-complete API, a constraint-based validation system, a small package size, minimal re-renders, easy adoption, and consistent validation strategies.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~38.9k

    React Router

    React Router homepage

    React Router is instrumental in implementing declarative routing within React applications. Its approach simplifies the creation of dynamic, single-page applications, allowing developers to manage navigation and view transitions with ease. The library's popularity and utility in the React ecosystem are evident from its GitHub stars, underscoring its role in shaping modern web application development.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~51.7k

    Redux / React Redux

    Redux homepage

    Redux / React Redux is a predictable state management for JavaScript apps in a consistent, predictable, and testable way. It enables powerful features like undo/redo, state persistence, and more. One of its features, Redux DevTools, can debug and trace state changes, with time-travel and error reporting capabilities. Most importantly, Redux works with any UI layer and has a large ecosystem of addons to fit different needs.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~60.3k

    Framer Motion

    Framer Motion homepage

    Meanwhile, Framer Motion is an open source, production-ready animation and gesture library for React on the web. Possessing straightforward syntax, robust capabilities, and optimized performance make it one of the most valuable libraries in the React ecosystem.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~21.4k

    React Testing Library

    React Testing Library homepage

    React Testing Library is one of the best choices for testing React components that emphasizes user experience, providing easy-to-use APIs for different frameworks such as Angular, Vue, and React. It also includes extensions for Cypress and React Native, which further displays its versatility and effectiveness.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~18.5k

    React Email

    React Email homepage

    React Email consists of high-quality, unstyled components for creating beautiful emails using React. The components are responsive, accessible, customizable, and compatible with most email clients. They also back server-side rendering and CSS inclining, making it a valuable tool in the React ecosystem for creating impactful email campaigns.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~11.7k

    React Use

    Last but not least, React Use is a large library of React hooks, ported from libreact, that provide various functionalities for React components. This shows how it can be a valuable resource for developers seeking to enhance their applications with custom hooks, as reflected in its GitHub stars.

    By the numbers (accurate as of 26th Feb 2024):

    • GitHub stars: ~39.8k

    Most Useful and Impactful React Libraries List

    The React ecosystem consists of countless libraries that streamline web development and tackle many different challenges. Each of the libraries mentioned have a crucial role in improving the quality and efficiency of web apps development. With strong community support, the React ecosystem is a dynamic and invaluable resource for developers.

  • Top React UI Component Libraries in 2024

    Explore some of the most popular React UI Component Libraries.

    Feilin Liangga Putri
    4 min read
    Feb 26, 2024

    Top React UI Component Libraries in 2024

    UI component libraries improve developer efficiency by enabling consistent design and code reuse. As the top JavaScript frameworks, React offers a wide range of UI component libraries. This article will delve into some of the most popular and robust options available.

    MUI (formerly Material UI)

    MUI homepage

    MUI, previously known as Material UI, provides React developers with a range of free UI tools including a diverse component library, customizable themes, and production-ready components, all in line with Google's Material Design principles. This makes it an excellent option for creating visually appealing and powerful web applications.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~90.8k
    • Npm downloads (weekly): ~2,900,000

    Ant Design

    Ant Design homepage

    Ant Design uses CSS-in-JS technology to provide dynamic and mixed theme ability, and also improves the performance of the application by using component level CSS-in-JS solution. It is commonly used in the development of complex and large scale enterprise applications.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~89.4k
    • Npm downloads (weekly): ~1,100,000

    Shadcn UI

    Shadcn UI homepage

    Shadcn UI consists of beautifully designed components built using Radix UI and Tailwind CSS, which are accessible, customizable, and open source. They cover a wide variety of use cases such as dashboard, tasks, forms, music, and authentication.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~49.2k
    • Npm downloads (weekly): -

    Chakra UI

    Chakra UI homepage

    Next, Chakra UI is a simple, modular and accessible component library for building React applications. It offers accessible, themeable, composable and light/dark UI components, as well as developer experience and community support, making it an excellent choice for developers who prioritize inclusivity and flexibility in their web applications. Its emphasis on composition and ease of styling allows for rapid development of attractive and accessible web interfaces.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~36k
    • Npm downloads (weekly): ~457,000


    Mantine homepage

    Mantine is a React components library that offers more than 100 customizable components and 50 hooks for building accessible web applications faster. It supports visual customizations with props, styles overriding, and flexible theming with colors, fonts, shadows, and more – providing developers with a versatile toolkit for building responsive and visually appealing web applications.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~23.5k
    • Npm downloads (weekly): ~257,000

    React Bootstrap

    React Bootstrap homepage

    Additionally, React Bootstrap is a library that replaces the Bootstrap JavaScript with React components, without unneeded dependencies like jQuery. As one of the original React libraries, React-Bootstrap has grown alongside React, making it a great option.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~22.1k
    • Npm downloads (weekly): ~1,318,000

    Next UI

    Next UI homepage

    Next UI is a beautiful, fast and modern React UI library that provides a plugin to customize default themes, a fully-typed API, and accessibility support. Its focus on design and user experience, along with a developer-friendly attitude, makes it a top pick for web developers.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~18.4k
    • Npm downloads (weekly): ~57,000

    Semantic UI

    Semantic UI homepage

    Semantic UI is the official React integration for Semantic UI, a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Semantic UI React is jQuery free, declarative, and has a rich set of components and subcomponents. It also supports augmentation, shorthand props, and auto controlled state.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~13.2k
    • Npm downloads (weekly): ~217,000


    PrimeReact homepage

    Last but not least, PrimeReact includes advanced components like Data Tables, Trees, and more – offering a vast collection of widgets to build rich user interfaces. Its emphasis on theme customization and a wide array of components makes it suitable for applications demanding a high level of visual customization and functionality.

    By the numbers (accurate as of 22nd Feb 2024):

    • GitHub stars: ~5.3k
    • Npm downloads (weekly): ~104,000

    React UI Component Libraries List

    React UI component libraries in 2024 offer a variety of choices to meet different development needs and design preferences. These libraries cater to visual appeal, performance, and inclusivity. Their popularity, shown by GitHub stars and npm downloads, highlights their importance in the React ecosystem. As web development trends rapidly evolve, these libraries will likely continue evolving and taking an important part in web applications.

  • Best Large Open Source Next.js Projects to Study

    Understand how large scale web apps are structured by studying these Next.js projects.

    Feilin Liangga Putri
    6 min read
    Feb 19, 2024

    Best Large Open Source Next.js Projects to Study

    One of the most effective ways to grow as a developer is by studying real-world projects. In this article, we've curated a list of extensive Next.js projects for you to dive into and dissect. By exploring the architecture and codebase of these large-scale web applications, you'll gain invaluable insights into best practices, project structure, and advanced techniques.

    Whether you're a beginner looking to understand the fundamentals or an experienced developer aiming to refine your skills, these projects serve as valuable resources to elevate your proficiency and tackle complex challenges with confidence.


    Supabase homepage

    Supabase is an open-source alternative to Firebase that offers a full PostgreSQL database, real-time functionality, simplified authentication, seamless storage integration, and additional features. It empowers developers to build scalable and secure web applications while maintaining compatibility with existing tools and extensions.

    Beyond the basics, Supabase offers additional features like embedding vectors (great for geospatial data), real time subscriptions, edge functions (serverless compute), migration guides, project management tools, a command-line interface (CLI), and integrations with other services.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~62.9k
    • Technologies: Tailwind, Radix, React Query, Valtio, Yup


    Cal.com homepage

    Cal.com is an open-source scheduling tool that allows users to control their own data, workflow, and appearance. It is a successor of Calendly that is self-hosted or hosted by Cal.com, Inc. and can be deployed on the user's own domain.

    What's great about Cal.com is that it integrates with various services such as Google Calendar, Zoom, Daily.co, HubSpot, and more. It also supports customization, white-labeling, and API access. It has a built-in app store where users can add or remove integrations as they wish.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~27.2k
    • Technologies: Tailwind, React Hook Form, Radix, Zod, tRPC, Prisma


    Infisical homepage

    Infisical is an open-source secret management platform that teams use to centralize their secrets like API keys, database credentials, and configurations. It offers a user-friendly dashboard, client SDKs, CLI, API, native integrations, Kubernetes operator, agent, self-hosting, secret versioning, role-based access controls, secret scanning, and more. The wide range of features offers ample opportunities for learning and experimentation within the Next.js ecosystem.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~11k
    • Technologies: Tailwind, Emotion, Radix UI, React Hook Form, Redux, React Query, Yup, Zod, Zustand, i18next


    Dub.co homepage

    Dub.co is an open-source link management tool for modern marketing teams to create, share, and track short links. One most important feature is you can host Dub.co on your own server for more control over your data and design as an opportunity to experiment with Next.js.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~14.7k
    • Technologies: Tailwind, SWR, Prisma, PlanetScale


    Twenty homepage

    Compared to alternatives, Twenty is great for the fact that it offers full control, freedom, and the ability to contribute, self-host, and fork, breaking away from vendor lock-in and allowing users to shape the open future of CRM. This is while also prioritizing data accessibility and visualization from various sources without retrofitting, and providing an effortlessly intuitive interface inspired by Notion.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~8.5k
    • Technologies: Chakra UI, React Hook Form, Zod, Apollo, GraphQL

    Inbox Zero

    Inbox Zero homepage

    Inbox Zero is an open-source email app that helps users reach inbox zero fast with AI assistance. Its unique feature is that it involves AI to help users manage their email subscriptions, automate their replies, block cold emails, and analyze their inbox.

    What's more, the AI lets users instruct the app in plain English to reply, forward, or archive emails based on certain rules. Users can also use planning mode to review the AI's suggestions before applying them.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~1.4k
    • Technologies: Tailwind, React Hook Form, Radix, SWR, Prisma, Zod


    Rallly homepage

    Rallly is a web application that allows users to schedule group meetings with friends, colleagues and teams by creating meeting polls based on participants' availability. With the convenience of not having to sign up/login, users only have to simply enter their name and email to join a poll. Hence, this allows Rallly to have multiple advantages over alternatives, including its simplicity, privacy and customisation.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~2.8k
    • Technologies: Tailwind, Radix, React Hook Form, React Query, tRPC, Prisma


    Formbricks homepage

    Formbricks is a free and open source survey platform that allows users to gather feedback from various channels and integrate with other tools. Users can create surveys with a no-code editor, launch and target surveys to specific user groups, invite team members to collaborate, and leverage Formbricks Insight Platform or build their own data analysis capabilities.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~5k
    • Technologies: Tailwind, Radix, React Hook Form


    Civitai homepage

    Civitai is an open-source platform where people can share, collaborate, and learn from each other's stable diffusion models, which are techniques to customize AI generations. Users can also leave comments and feedback on each other's models to facilitate collaboration and knowledge sharing.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~5.2k
    • Technologies: Mantine, tRPC, Prisma


    Plane homepage

    Plane is an open source project management tool that helps you track your issues, epics, and product roadmaps in the simplest way possible. As a platform used by over a thousand companies across countries, it offers a minimalist and intuitive interface, a powerful query language, a flexible workflow system, and integrations with popular tools like GitHub, Slack, and Figma.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: ~22.5k
    • Technologies: Tailwind, SWR, MobX


    Daily.dev homepage

    Last but not least, Daily.dev is a professional network for developers to learn, collaborate, and grow together. Its feature involves customizing your feed, bookmarking articles, syncing across devices, and joining a community of developers.

    Its web app utilizes the brand new incremental static generation feature of Next.js to deliver pages fast, which makes it interesting to explore. This is used to deliver the latest programming news from top tech publications on any topic you want so that you can stay updated on the latest trends, learn new skills, and discover new opportunities in the tech industry.

    By the numbers (accurate as of 15th Feb 2024):

    • GitHub stars: 604
    • Technologies: Tailwind, React Query, GraphQL

    Next.js projects list

    This collection of large-scale Next.js projects offers a rich learning environment for those seeking to deepen their understanding and hone their skills. By dissecting and exploring these real-world applications, we can gain valuable insights into advanced techniques, project structures, and best practices. Whether you're looking to master the fundamentals or refine your expertise, immersing yourself in these projects provides a hands-on opportunity to elevate your proficiency and tackle complex challenges with confidence. So, dive in, explore, and embark on a journey of continuous learning and growth within the Next.js ecosystem!

  • Core Web Vitals Metrics in 5 Minutes

    Understand how to quantify good user experience in web pages.

    Feilin Liangga Putri
    5 min read
    Feb 16, 2024

    Core Web Vitals Metrics in 5 Minutes

    As developers, we often wonder what kind of web page gives good user experience. The problem arises when we try to quantify it. Enter 'Core Web Vitals' – a set of key metrics provided by Google that constitute unified guidance for quality signals. It measures real-world user experience for loading performance, interactivity, and visual stability of the page.

    In this short article, we will summarize the most important things you should know about these metrics and provide you with links to learn more should you desire.

    Largest Contentful Paint

    LCP Standard

    The first metric to consider is the Largest Contentful Paint (LCP). LCP is a metric that measures the loading performance of a page. Specifically, it marks the point in the page load timeline from a user's perspective when the main/largest content (such as images or videos) has likely loaded.

    LCP is represented in seconds, where anything under 2.5 seconds is great. It is extremely crucial as it represents how quickly users can access the main content of a web page. The faster it is, the better user engagement, satisfaction, and retention. To monitor, platforms such as Google's PageSpeed Insights or Lighthouse can be used.

    LCP is affected by several factors: Server response times, network latency, render-blocking resources, and the complexity of the web page's layout. Optimizing these factors can help improve LCP and overall loading performance.

    Examples of such optimization techniques include:

    • Optimizing images and videos: Compressing images, using modern image formats, and lazy loading techniques
    • Minimizing render-blocking resources: Minimize synchronous stylesheets/scripts or long tasks
    • Prioritizing critical content: Preloading critical resources, optimizing server response times (reduce time to first byte), and prioritizing above-the-fold content
    • Implementing efficient caching: Leveraging browser caching, Content Delivery Networks (CDNs), and optimizing cache policies

    Useful links

    First Input Delay

    FID Standard

    First Input Delay (FID) is also an important metric that assesses the responsiveness of a web page. Different from LCP, FID evaluates the interactivity of a page by quantifying the time taken between users' first action (such as clicking a button or tapping on a link) and how long the browser takes to respond to that.

    A low FID (under 100 milliseconds) indicates that the page is highly interactive and responsive to user input, contributing to a positive user experience. Similar to LCP, FID is measured using performance monitoring tools like Google's PageSpeed Insights, Lighthouse, or web analytics platforms.

    As FID is affected by code execution time, main thread activity and the presence of long tasks that block the browser's responsiveness, the following methods will help in improving it:

    • Optimizing asset loading: Utilizing asynchronous loading for scripts, leveraging browser caching, and optimizing resource delivery
    • Prioritizing critical rendering path: Prioritizing above-the-fold content, optimizing server response times, and minimizing layout shifts
    • Avoid long tasks: Identify and optimize long tasks that monopolize the main thread by breaking up long tasks into smaller, more manageable chunks using techniques like code splitting, web workers, or offloading computation to background threads
    • Reduce third-party impact: Minimize the use of third-party scripts/services or implement lazy loading or asynchronous loading for non-essential third-party resources

    Useful links

    Cumulative Layout Shift

    CLS Standard

    Lastly, Cumulative Layout Shift (CLS) measures visual stability by quantifying how much visible content moves around on the screen while loading and the total of all individual layout movement scores (ranging from 0 to 1) that happens while the page remains active. Layout shifts happen when visible elements on a page unexpectedly move to a different position, causing content to reorganize and disrupt user experience. A low CLS (under 0.1) means that the page's layout remains stable and consistent with minimum disruption for users.

    CLS is affected by the following factors:

    • Images without dimensions: Images that load without specified dimensions can cause layout shifts when they render and occupy space on the page
    • Ads and embedded content: Third-party ads, iframes, or dynamically loaded content can trigger layout shifts as they load and display on the page
    • Font loading: Changes in font size or style during page rendering can lead to text reflow and layout shifts
    • Dynamic content: Content that loads asynchronously or dynamically, such as user-generated content or live updates, can cause layout shifts as it appears on the page

    Hence, to reduce CLS, developers can try the following techniques:

    • Specifying image dimensions
    • Preloading and lazy loading
    • Reserving space for ads and embeds
    • Avoiding dynamically injected content

    Useful links

    Core Web Vitals List

    Understanding and optimizing Core Web Vitals metrics are essential for developers looking to improve user experience and website performance. Multiple research shows that only about 40% of web pages pass these metrics. By focusing on them, developers can easily quantify the scores and performance of their web pages, giving users a great experience while visiting the website.

  • 10 Best Free Tailwind-based UI Component Libraries and UI Kits

    Build your next project quickly with these Tailwind-based UI libraries.

    Yangshun Tay
    7 min read
    Jan 19, 2024

    10 Best Free Tailwind-based UI Component Libraries and UI Kits

    Tailwind CSS' "write only atomic classes in your HTML approach" has long been regarded as a controversial and radical approach to styling since its inception. Over the years, the industry has started to see its benefits and Tailwind has since gained immense popularity.

    In this article, we explore the diverse range of free UI components and libraries that leverage Tailwind CSS, empowering front end developers to build modern and aesthetically pleasing user interfaces without compromising on efficiency or flexibility.

    Whether you're a seasoned developer or just venturing into the realm of Tailwind-powered design, this article is your compass to discover the most valuable and freely available UI component libraries that can elevate your websites to new heights.

    Sailboat UI

    Sailboat UI homepage

    Sailboat UI is a modern UI component library specifically designed for Tailwind CSS. It offers over 150 open source components, and uses Alpine.js for some interactive components. However, the important part of the examples is the Tailwind classes used, so you can easily integrate it with your favorite headless UI library in a framework of your choice.

    What is great about Sailboat is that it offers a few variants of each component. For example, Accordions are offered in multiple styles like simple, bordered, with background, etc, so you can choose a variant that suits your theme and brand.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 28
    • Sections/blocks: N/A
    • GitHub stars: 1,076
    • Mode of usage: Copy/paste HTML and CSS
    • Framework integrations: Alpine.js


    HyperUI homepage

    HyperUI is a collection of free copy-pastable Tailwind CSS components that has been around since 2021. It is very similar to Tailwind UI in that both contain components and sections for application, marketing, and e-commerce websites. Since it's pure copy pasting of HTML/CSS, there's nothing to install and you can integrate it with any headless UI library.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 27
    • Sections/blocks: 20
    • GitHub stars: 6,949
    • Mode of usage: Copy/paste HTML and CSS
    • Framework integrations: N/A

    Preline UI

    Preline UI homepage

    The most outstanding thing about Preline is its vast library of components and sections. At over 60 components and 170 sections, it is the largest free set of Tailwind component examples out there. The examples are all very well-built and look very polished. Last but not least, all the examples have full support for dark mode.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 60
    • Sections/blocks: 171
    • GitHub stars: 3,200
    • Mode of usage: Copy/paste HTML and CSS
    • Framework integrations: N/A


    daisyUI homepage

    daisyUI is one of the first Tailwind-based UI component libraries in existence. The library takes a unique approach where it provides a Tailwind plugin that injects its own higher-level classes that are composed of Tailwind utility classes. This somewhat defeats the purpose of Tailwind's atomic classes approach as developers are using pre-built CSS classes, similar to Bootstrap. Nevertheless, with 28.5k stars, it's a wildly popular library that boasts a vast library of over 50 components with multiple variants and classes.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 56
    • Sections/blocks: N/A
    • GitHub stars: 28,494
    • Mode of usage: Import CSS from npm package
    • Framework integrations: N/A


    Tremor homepage

    While many libraries are aimed at more general usage of marketing and e-commerce, Tremor is focused on dashboard and data visualization components. Beyond the standard UI components of accordion, button, forms, Tremor includes multiple visualization components – area chart, bar chart, donut chart, line chart, scatter chart, you name it, they have it.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 29
    • Sections/blocks: 5
    • GitHub stars: 14,227
    • Mode of usage: Import React components from npm package
    • Framework integrations: React


    NextUI homepage

    Despite the name, NextUI has nothing to do with Next.js, the popular React metaframework. Since v2.0, Next UI is built on top of Tailwind CSS and React Aria and is one of the fastest growing UI libraries based on Tailwind. Like Tremor, to use Next UI, import React components from the npm package @nextui-org/react and use the components within your application.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 38
    • Sections/blocks: N/A
    • GitHub stars: 17,879
    • Mode of usage: Import React components from npm package
    • Framework integrations: React


    shadcn/ui homepage

    If there was one library that took the world by storm in 2023, it'd be shadcn/ui, which is built on top of Tailwind CSS and Radix UI. While many other Tailwind UI libraries make developers copy the HTML/CSS or install the library as an npm dependency, shadcn takes an approach where you copy and paste any required component code into your projects; you have full ownership and control over the code. This approach has both merits and drawbacks. While you have full control over the components, the obvious downside is that you won't receive updates automatically and have to remember to sync any changes. This approach is best used by teams who have strong front end developers who have a need for customizing component appearance as well as the capability to maintain the components in the long term.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 46
    • Sections/blocks: N/A
    • GitHub stars: 44,449
    • Mode of usage: Copy/paste React components (manually or via CLI)
    • Framework integrations: React (but community forks available in Vue and Svelte)

    Park UI

    Park UI homepage

    Park UI is a relatively new Tailwind library but is a strong contender to shadcn/ui. Park UI's usage approach is similar to shadcn/ui,

    Where shadcn/ui is coupled with Tailwind and Radix UI, Park UI is way more versatile. It has first class support for both Tailwind CSS and Panda CSS (another atomic CSS library that uses a JavaScript-first approach) and also integrates with React, Vue, and Solid via Ark UI, a headless UI library that has first party implementations with React, Vue, and Solid.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 40
    • Sections/blocks: N/A
    • GitHub stars: 842
    • Mode of usage: Copy/paste React components (manually or via CLI)
    • Framework integrations: React, Vue, Solid

    Pines UI

    Pines UI homepage

    Pines UI is a UI library built on top of Tailwind CSS and Alpine.js and offers multiple variants for each component. With black as its primary color, the default appearance of the components highly resemble shadcn/ui and Park UI.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: 26
    • Sections/blocks: 34 (more than a hundred available for Pro subscribers)
    • GitHub stars: 1,696
    • Mode of usage: Copy/paste components
    • Framework integrations: React

    Aceternity UI

    Aceternity UI homepage

    Last but not least, we have Aceternity UI. Built by the amazing Manu Arora, Aceternity UI is unlike the typical common UI component libraries introduced above. It is a collection of bespoke and carefully crafted UI sections built on top of Tailwind CSS and Framer Motion.

    Some of our favorite examples include the Hero Parallax, 3D Card Effect, and the Wavy Background. It's an extremely fast way to elevate your website's design and add a "wow" factor! We recommend using it along another UI component library of your choice.

    By the numbers (accurate as of 18th Jan 2024):

    • Components: N/A
    • Sections/blocks: 36
    • GitHub stars: Not open sourced
    • Mode of usage: Copy/paste components
    • Framework integrations: React

    Tailwind Based Component Libraries and UI Kits List

  • User Interface Components at Scale

    How thousands of engineers at big tech companies build user interface components.

    Yangshun Tay
    4 min read
    Dec 23, 2023

    User Interface Components at Scale

    Now that we know how Meta writes JavaScript and CSS, let's see how they're used to build UI components.

    Standardize on a UI library/framework

    Naturally the company that created React will build all their applications using React. You won't find Angular, Vue, or Svelte in Meta's codebase and Meta is all-in on React. By focusing on a single UI framework, tooling, knowledge and expertise can be shared and transferred more easily. Moreover, any issues faced by Meta engineers can be solved in-house, by consulting the React team. Longer term larger issues can be addressed in React's roadmap.

    Component documentation

    To easily build and test React components, Meta engineers can write example files for these components to demonstrate how the component looks and behaves when using a certain combination of props, similar to stories in Storybook.

    All React components in the codebase that have example files are easily searchable within an internal tool and can be interacted with right within the browser. It is super handy for discovering common components and seeing how they are being used.


    Unit testing of component interaction and behavior can be done using Jest and React Testing Library. Snapshot tests and screenshot tests can also be conveniently generated from the component examples.

    Headless components

    Each product Meta builds has its own design system with a React implementation of the UI components. Many UI components (e.g. buttons, dropdowns, modals, etc) have the same underlying logic, functionality, and accessibility features built in and that layer can be shared between UI components belonging to different design systems. Each design system only has to care about customizing the appearance. This shared logic and accessibility layer is known as headless UI components. Naturally, Meta has built its own headless components to be reused across product design systems.

    Companies looking to accelerate their UI components development should pick up one of the popular headless UI component libraries. For React, there's Radix UI, React Aria, and Aria Kit.

    Component analytics

    Meta also has internal tools to gain insights on how big a component's file size is (bytes) and analytics, e.g. which modules are depending on the component (importing the component) and how many times they are being used in the codebase. This is useful for tracking progress when deprecating components.

    Monorepo perils

    In a monorepo, it becomes too easy to import components from anywhere in the codebase. However, this is bad when a component is still under development and not ready to be used widely or when a component is meant to be deprecated. To prevent unwarranted usage of components, lint rules can be used to flag usages of the components outside of directories they are not allowed to be used in.


    An emerging technology trend / workflow is “Design to code”, meaning you turn designs from your designer into code that you can use directly within your app. Since Figma is the industry standard for designing digital products these days, a forward-looking styling approach will be one that's integrated with Figma and can support exporting of UI markup and styles from Figma designs. Companies like Builder.io and Locofy offer such solutions.


    Over the years, new UI libraries offering different reactive approaches have emerged (e.g. Qwik and Solid). React may no longer be the most performant library, but in terms of the overall ecosystem, learning resources, financial backing, availability of developers proficient in it, React is still one of the safest choices. Moreover, React is still constantly innovating and improving, with projects like React Server Components and an optimizing compiler. However, it is more important to decide on a company-wide blessed framework that the team is comfortable with, than to choose the most trendy UI framework.

    For component examples and visual testing, Chromatic (by the maintainers of Storybook) and Percy are the leading choices available in the market.

    UI components scalability checklist

    • Company-wide recommendation for UI framework/library (e.g. React, Vue, Angular, Svelte)
    • Documentation of components
    • Testing of components (unit, screenshot, accessibility)
    • Use a headless UI component library
    • Component analytics
    • Design-to-code (optional)
  • CSS at Scale

    How thousands of engineers at big tech companies write CSS.

    Yangshun Tay
    7 min read
    Dec 22, 2023

    CSS at Scale

    Writing CSS at scale, particularly in large and complex projects, can present several challenges. Here are some common problems associated with scaling CSS:

    • Global namespace: CSS operates in a global scope, which can lead to naming collisions and unintended style overrides. As a project grows, managing the global namespace becomes increasingly challenging, and conflicts between styles become more likely.
    • Specificity issues: CSS specificity determines which styles apply to an element. As the project scales, managing and understanding specificity can become complex, leading to unexpected styling outcomes and difficulties in maintaining a consistent design.
    • Unclear dependencies: CSS classes can be created on the fly, and you can't be sure where a style is being used and whether it's still being used.
    • Huge stylesheets: When it is hard to determine whether certain styles are still being used, stylesheets become “add-only”. This leads to redundant or unused styles, as well as overly specific selectors, which contribute to larger file sizes and slower loading and rendering times.

    CSS approach

    CSS uses a global namespace, which causes many problems at scale when many developers are building into the same web application. Since the 2010s, Meta has been writing CSS using an approach called CSS modules, which solves some of the problems with CSS at scale – global namespace, including styles only on pages that use them, dead code elimination (only including the selectors that are still being referenced), and some others. Meta's CSS modules implementation is not open sourced but bundlers like webpack add support for something similar.

    In 2014, Christopher Chedeau gave an insightful talk about writing CSS within your JS. In 2018, Meta started their rewrite of facebook.com and announced a new way of writing CSS in JS, which is called StyleX. StyleX's API resembles CSS-in-JS libraries like Aphrodite and Glamor, and has these key features:

    • Generated atomic CSS stylesheet: An atomic CSS stylesheet has a logarithmic (flatter) growth curve because it's proportional to the number of unique style declarations rather than to the number of styles and features written. Hence the stylesheet does not grow as fast as the number of features and the file size will stay relatively similar even with thousands of features and pages. The cost is being paid by each page as the HTML size is now larger.
    • Type-safe: Property keys can be checked for typo mistakes as only a recognized set of keys are allowed (e.g. margin, padding, color, etc.). Components can decide which CSS properties they want to allow to be passed in as props (e.g. only margins allowed). This prevents users of your components from customizing in ways you don't want them to.
    • No runtime: The styles are extracted into a static CSS file at build time. Little/no JavaScript needs to be run to inject the styles. This is important to prevent Flash of Unstyled Content and instances where JavaScript is not executed or supported.
    • No specificity issues: Each atomic class declaration only contains one property and is not nested.
    • Determinism: With atomic classes, each class on a DOM element specifies a different underlying property, and you won't run into the issue of non-deterministic result which depends on the order of the classes in the stylesheet.

    The team responsible for rebuilding facebook.com gave a talk about StyleX during React Conf 2019 and also at React Finland. The process of open sourcing StyleX has been a long one and as of Nov 2023, StyleX is finally open sourced. A caveat about StyleX is that it needs extra configuration to work in UI frameworks that use custom file formats like Vue and Svelte.

    In the open source ecosystem, Tailwind CSS is the rage. Like StyleX, Tailwind also uses atomic CSS approach so they also share a similar benefit of a CSS stylesheet file that plateaus. However, since Tailwind CSS is just a set of atomic classes, you can use it within both JavaScript and HTML and even server-side Ruby templates. Out-of-the-box, the default Tailwind config provides a set of predefined classes (similar to design tokens) whereas StyleX does not.

    Panda CSS is a new atomic CSS-in-JS library by the creators of Chakra UI and it is the middleground of StyleX (library calls are compiled away, type-safe) and Tailwind (inline style declarations, provides some default styling tokens).

    The advent of React Server Components means that a whole category of styling libraries that relied on context for theming and runtime injection without any static stylesheet extraction will cease to work. Thankfully Tailwind and Panda CSS generate styles at build time and are fully-compatible with React Server Components.

    If you don't mind seeing multiple classes in your HTML or building only with HTML and CSS (or non-JavaScript templating approach), Tailwind CSS will be my recommendation. If you prefer a JavaScript-first approach for styling and type-safety is important to you, use Panda CSS. Panda CSS is similar to StyleX but has a larger community maintaining it.

    CSS preprocessing

    Just like how developers can use the latest language features of JavaScript by using Babel, developers can also use the latest CSS features by using a CSS preprocessor like PostCSS to automate routine CSS operations, utilize future CSS syntax, and enhance CSS's functionality.

    Using Tailwind and Panda removes the need for writing CSS directly, so you might not actually need to use PostCSS in your applications at all. By the way, Tailwind and Panda use PostCSS under-the-hood so you will still be using PostCSS, just not directly.


    Because Meta uses StyleX for authoring styles, linting is done in JavaScript, which means ESLint and Flow. StyleX's type-safety features allow components to restrict styling props to be of only certain allowed properties (e.g. margin) and only allowed values (e.g. multiples of 4).

    Teams using Tailwind CSS should install the official Tailwind CSS Intellisense plugin which offers autocomplete, linting and previews for a class' underlying styles.

    If you're writing plain CSS or CSS modules, stylelint is the recommended linter.

    Design tokens

    Design tokens are essentially variables used to store design decisions such as colors, fonts, border radii, spacings, animations, and more. These tokens can be simple values like a number, color hex code, or more complex information like a typography scale (font size, line height, letter spacing).

    By using design tokens, teams can ensure consistency across their product. As the design system evolves, changes made to the tokens automatically propagate throughout the product, ensuring uniformity and reducing the risk of inconsistencies.

    On the web, design tokens can be implemented using CSS variables, or an object in JavaScript. Meta uses CSS variables for color tokens so that dark mode is essentially another set of color tokens. For spacing, border radii and other kinds of numerical values, tokens are not being exposed to developers because most design choices have been abstracted behind UI components built by the product's design system team.

    In my opinion, UI components don't capture every design requirement and it's useful to make design tokens available for product engineers to use. Your company's product design team would probably already have selected design tokens and used them in their design system.

    If you are using Tailwind or Panda CSS, the default configuration includes tokens for spacing, colors, typography, etc but they can be configured for custom design tokens. If you are not using Tailwind or Panda CSS and don't have a design system but want a similar default set of tokens, Open Props offers a good set of design tokens in the form of CSS variables.


    An Atomic stylesheet is the recommended approach for styling on the web because the stylesheet size does not grow proportionately to the number of features/developers/products. Tailwind CSS and Panda CSS are modern libraries to achieve atomic stylesheet generation in a futureproof fashion that's compatible with React Server Components and a server-first component era.

    Styling scalability checklist

    • Use Atomic CSS to keep the stylesheet size small.
    • Use CSS preprocessors to enable the latest CSS language features.
    • Use CSS linters to standardize on practices.
    • Use standardized design tokens.
  • JavaScript at Scale

    How thousands of engineers at big tech companies write JavaScript.

    Yangshun Tay
    9 min read
    Dec 21, 2023

    JavaScript at Scale

    As web development continued to evolve, the demand for more advanced and modern features led to the development of ECMAScript 6 (ES6), also known as ECMAScript 2015. Released in June 2015, ES6 introduced a range of new features, including arrow functions, classes, template literals, and destructuring assignments, among others.

    Today, JavaScript is a ubiquitous language used not only for client-side web development but also for server-side development (Node.js) and mobile app development (React Native). The language continues to evolve, with ongoing efforts to enhance performance, introduce new features, and address the needs of modern web development.

    Use latest (stable) language features

    After the release of ES2015 / ES6, the ECMAScript specification transitioned to a yearly release cycle, allowing for a more agile development process and quicker incorporation of new features. Subsequent releases, such as ECMAScript 2016 (ES7), ECMAScript 2017 (ES8), and so on, brought additional improvements and features to the language.

    Using the latest JavaScript language features in web development is crucial for several reasons. First and foremost, it ensures compatibility with modern browsers and leverages performance improvements introduced in newer language versions. This not only enhances the user experience but also aligns development efforts with the evolving standards of the JavaScript ecosystem. Furthermore, modern features contribute to enhanced productivity, readability, and maintainability of code. Syntax improvements, abstractions, and functionalities like arrow functions, async/await, and class syntax make code more concise, organized, and easier to understand. By staying current, developers gain access to a broader ecosystem of APIs, libraries, and community support, fostering a better development experience and future-proofing their code. Keep your developers happy by enabling the latest technologies and language features.

    A combination of JavaScript compilers and polyfills allow developers to use the latest ECMAScript features. JavaScript compilers like Babel transpile newer language syntax into an older version while polyfills like core-js provide implementations for newer JavaScript APIs and they work together so that older browsers that do not support the features can still run the code. Google uses their homegrown Google Closure Compiler while Meta uses a combination of Babel and Flow.

    TypeScript, which offers type checking on top of enabling modern language features, is both a compiler and type checker, so you might not need Babel at all. Read on to find out more.

    Type-safety first

    Type-safety is extremely important in large companies and large codebase. Type-safety helps to eliminate an entire class of bugs during development that will not make it into production.

    Meta places such a high importance in type-safety that they have developed type-safe versions of / type checkers for every dynamic-typed language they use:

    Other big tech companies like Microsoft have developed TypeScript and Google has developed Dart, which further highlights the importance of using type-safe languages when developing at scale. These languages / type checkers are open sourced and available for all to use.

    Beyond catching and preventing type errors, type-safe languages are also easier to read and maintain. In VS Code, you can hover over a symbol to know its type. After all, code is read much more than it is written! The benefits of increased readability and clarity outweighs the learning curve in the long term. IDEs can also improve the developer experience by providing better autocompletion suggestions, and showing type errors inline.

    Although Flow is open sourced, the Flow team has publicly stated that open source support is not a priority. In the open source ecosystem, there are other alternatives for writing type-safe web applications like ReScript and Reason, which also have their roots in Meta, but they have lost traction in recent years.

    Automate via linters and formatters

    There are multiple ways to write and format code, and in a large codebase built by a large team, inconsistent coding styles across different files and developers make the code difficult to read and maintain. This lack of standardization can also hinder collaboration and slow down development, as more time is spent understanding and debugging the code instead of adding new features or improvements.

    Linting is the automated process of analyzing source code to detect errors, enforce coding conventions, and identify potential issues. Linters, or linting tools, play a crucial role in improving code quality by catching syntax errors, promoting consistent coding styles, and enforcing best practices. They contribute to error prevention, enhance code readability, and establish a uniform coding style across a project.

    Meta uses ESLint with eslint-plugin-flowtype for linting JavaScript. If you're using TypeScript, the recommendation would be ESLint with typescript-eslint. Configuring ESLint rules individually can be a chore, so it is recommended to use popular open source ESLint configs like eslint-config-airbnb as a starting point. Meta's internal ESLint config can be found at eslint-config-fbjs.

    It is recommended to add ESLint rules around sorting imports, sorting object keys alphabetically, sorting React component props alphabetically, etc. This reduces the chances of merge conflicts when developers edit the same file. Christoph Nakazawa, ex-manager on Meta's JavaScript infrastructure and React Native team published @nkzw/eslint-config which has a high degree of overlap with Meta's ESLint configuration.

    Coding style is another aspect that can be automated and benefits from consistency. Prettier is the de facto choice for formatting. In 2018, Christopher Chedeau ran a format-athon at Meta where he rallied around 20 engineers across the company to format the codebase with Prettier.

    Linting should ideally be executed during development so that errors and warnings are reflected within the IDE instantly. The fast feedback loop increases productivity as the developer can fix the issues on-the-spot while the context is still fresh. Autofix lint issues and format the code on save by adding to VS Code's settings.json:

    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true


    A JavaScript runtime is an environment where JavaScript code is executed. JavaScript was originally designed to be run in the browser, but these days JavaScript can also be run on the server using Node.js, which is the most popular server-side JavaScript runtime built on Google Chrome's V8 engine.

    Meta uses Hermes for server-side rendering of React, although Hermes was originally designed to run React Native apps on mobile platforms.

    There isn't much of a choice to debate about here. In the wild, most companies use Node.js and it has gotten really good in recent years. Deno and Bun are rising stars in the JavaScript runtime space and both offer TypeScript support out-of-the-box. Deno has a high focus on security by restricting access to sensitive runtime APIs by default, while Bun is extremely fast and includes a package manager, bundler, and test runner.

    Deno and Bun are still considered new so the risk is yours to bear if you decide to go with them.

    Officially-endorsed/supported libraries

    While the JavaScript language is rapidly evolving, in the last decade, there were huge gaps where the language left in terms of providing solutions to common product needs like functional utilities, datetime formatting and manipulation, etc. As a result, a rich ecosystem of utilities and libraries that cater to various development needs have emerged:

    Engineering leadership or a front end infrastructure team should make a decision on which libraries to use for various purposes. This prevents different libraries serving the same purpose being shipped in the same app and users end up paying the cost of downloading the JavaScript twice. Resources should also be committed to supporting internal developers facing issues with them and performing periodic codebase-wide upgrading of the library versions being used.

    Package management

    Finally, the last piece of JavaScript development to discuss is package management. Package management in JavaScript refers to the process of managing, distributing, and installing JavaScript libraries and tools within a project. A package manager is a tool that simplifies these tasks by automating the installation, versioning, and dependency resolution of external code packages.

    Back in 2016, Meta created Yarn as an improvement over npm, it introduced the concepts of lockfiles, fast installs, global offline caches, workspaces, etc. A key feature of a scalable package manager is locking down the version dependencies and an offline mirror. You don't want to be blocked from deployment if the npm registry goes down. At Meta, node_modules are installed via Yarn v1, scanned for vulnerabilities, and checked into the monorepo.

    These days, npm has mostly caught up with Yarn in terms of feature parity and Yarn has also undergone many changes since its initial launch. As of writing, Yarn is now v4, introduces Yarn Plug'n'Play, and is no longer maintained by Meta. Personally, my goto package manager these days is pnpm because it has the most features, has an amazing development experience, and is frequently updated.


    TypeScript by Microsoft is now the de facto way to write type-safe web applications. Community support (learning resources, library type declarations) and developer tooling support (linters, IDE integration) for TypeScript is also extremely strong; new JavaScript runtimes like Deno and Bun also support TypeScript out-of-the-box. Even Google uses TypeScript as the primary language for Angular development, a UI framework created by them.

    You will benefit from choosing TypeScript, even if the size of your codebase is small.

    JavaScript scalability checklist

    JavaScript at Scale List

    • Use modern language features, syntax, and APIs.
    • Use a type-safe language like TypeScript.
    • Leverage linting and formatting to enforce coding style and educate best practices.
    • Officially-endorsed/supported libraries.
    • Use features or modern package managers, check in your node_modules / use an offline mirror.
    • Upgrade runtime and package versions periodically.
  • Web Apps at Scale – Introduction

    How thousands of engineers at big tech companies build web apps.

    Yangshun Tay
    5 min read
    Dec 20, 2023

    Web Apps at Scale – Introduction

    Meta (previously Facebook) is known for its social media platforms and used by a huge number of users and services. Meta's websites include facebook.com, instagram.com, messenger.com, whatsapp.com, threads.net, meta.com, and more and are used by billions of global users monthly.

    Developing these websites consisting of thousands of pages by thousands of engineers is no simple feat. In this article, we will provide some insights of how big companies like Meta and Google handle front end development on such a large scale, the tools, methods, and strategies they use and how growing companies who face the same problems can adopt some of the approaches using alternatives in the open source ecosystem.

    Aside from Meta's huge web user base, Meta is also an interesting company to look at because between 2015 to 2020, Meta was the forerunner of modern front end development with the creation of popular open source front end technologies like React, React Native, Flux, Jest, GraphQL, Docusaurus, Relay, Draft.js, Yarn, and more. It's fair to say that Meta had a significant impact on the modern front end ecosystem.

    Disclaimer: I am no longer affiliated with Meta and this article does not represent Meta. Opinions and experiences are solely my own. I worked at Meta as a Front End Engineer from 2017 to early 2023 and things might have changed since then.

    Who am I?

    I am an ex-Meta Staff Engineer who led engineering teams to build meta.com and oculus.com. I was actively involved in the development of Meta's open source projects by creating Docusaurus 2, maintaining (and deprecating) Flux, and making small contributions to Lexical and Relay. Outside of front end development, I have also written multiple technical interview resources like Blind 75, Tech Interview Handbook, and Front End Interview Handbook, which have amassed over 100,000 GitHub stars.

    Overview of Front End at scale

    As a company grows, the number of features and number of engineers developing those features increase. Look at your company's front end code base and see:

    • How many different JavaScript or CSS frameworks are being used?
    • How many custom Button components have been built?
    • How big is your utils folder and how many duplicate utilities are present?
    • How many different React hook libraries are being used?

    If there are too many to count, congratulations, you have just identified tech debt. These problems start to occur because:

    • Existing solutions do not work for new problems.
    • No recommended practices or standardized ways for doing the same thing.
    • Different teams face similar problems.

    As a result of the above, teams solve the problems for themselves, because it's much faster to solve their own problem than to solve it for everyone. What can also happen is that someone tries to solve it for everyone, but the solution isn't sufficient and the next person comes along to “improve” the solution for their own use case without understanding the use cases of others and ends up making things worse for everyone, often in subtle unnoticeable ways like performance degradations.

    Duplicated code, different approaches to achieving a similar outcome, unusable existing solutions all contribute to tech debt. At scale and over a long period of time, tech debt that is seemingly small can compound and lead to disastrous business consequences like bugs, downtimes, and developer burn out. Thankfully, even small improvements will also lead to large benefits at scale when lots of products and people benefit from it.

    Metrics to measure

    Effective front end teams at scale score well on the following metrics:

    • Lead time for feature development: The amount of time it takes to develop a feature, get it reviewed, and ship it to production.
    • Deployment frequency: How often an organization successfully ships new releases to production.
    • Change failure rate: Percentage of changes that cause a bug/failure in production.
    • Product quality: Percentage of users having a good experience with the product. Does the website load fast enough? Does it mean the minimum accessibility standards? There are actually many ways to measure this, though they all have a varying level of subjectivity.


    Web Apps at Scale List

    It is important to know the nature of the organization you are in. Different types of organizations have different focuses and you should adapt your approach to the nature of the company and product. Tech debt and engineering scalability is not as important in certain companies for good reasons.

    Be also aware of premature optimizations. Sometimes what you think is a problem might just be a minor inconvenience that is not actually a critical problem to solve right now. Without thorough understanding of the problem, solving a problem prematurely and having to revert it later costs more time overall.

    As a Front End Engineer who mostly worked in product teams I'm not all that familiar with deployment infrastructure and the amazing product infrastructure work, so some parts will be glossed over.

  • 5 Most Important User Interface Questions to Master for Front End Interviews

    Practice these user interface questions if you are short on time to prepare for your front end interviews.

    Yangshun Tay
    7 min read
    Dec 19, 2023

    5 Most Important User Interface Questions to Master for Front End Interviews

    A common frustration when preparing for front end interviews is the sheer volume of questions to practice. There are over a 100 possible front end interview questions available on GreatFrontEnd. How do you choose the best questions to practice to get the highest return of investment on your time?

    Front end interview questions often revolve around a combination of fundamental JavaScript concepts, problem solving skills, layout building skills, and data structures and algorithms. To maximize your efficiency, we recommend practicing the most commonly-asked questions, along with those that touch multiple skills, so that you get all-rounded practice.

    In this list we will cover the most important User Interface questions to practice. Let's get started!

    Todo List

    Building a Todo list is a practical exercise that evaluates a front end engineer's ability to work with user interfaces, handle state, and perform basic CRUD (Create, Read, Update, Delete) operations. In the most basic form, candidates are asked to create a simple todo list where users can:

    1. Add new tasks to the list.
    2. Mark tasks as completed.
    3. Delete tasks from the list.

    It is a common interview question because it reflects real-world scenarios in front end development, where developers often create user interfaces to add new entries to a list, manipulate the list, and remove entries from the list.

    Building a well-implemented Todo list demonstrates proficiency in DOM manipulation, event handling, building accessible forms, event delegation, and state management. This is a question that can also have multiple potential follow-up questions:

    • Fetch suggestions from an API and display the suggestions in a combobox pattern.
    • Save the items to a persistent storage like localStorage or to a database and read from the storage.
    • Add undo/redo functionality.
    • Add reordering functionality.

    The ease of successfully implementing the follow-up questions is highly dependent on the quality of the basic implementation, so it's important to get the basic implementation right.

    Practice implementing a Todo List on GreatFrontEnd


    Tabs are a common UI pattern in web development, making this question practical and applicable to a front end engineer's daily tasks. Typically, candidates are asked to create a tabs UI component with the following requirements:

    1. Display three tabs: Tab 1, Tab 2, and Tab 3.
    2. When a tab is clicked, show the corresponding content for that tab and hide the content for other tabs.
    3. Apply a visual indication (e.g., styling change) to the active tab to show which tab is currently selected.

    For such questions, candidates might be asked to implement without using any external libraries or frameworks. Building a well-implemented Tabs component demonstrates proficiency in DOM manipulation, event handling, accessibility, event delegation, state management, and designing component abstractions. This is a question that can also have multiple potential follow-up questions:

    • Is the component well-encapsulated? Is it possible to have multiple Tabs components on the page each with its own state?
    • Add full keyboard support as per the WAI-ARIA Tabs pattern.
    • Add an API to dynamically add/remove tab items after the component has been initialized.
    • Load tab contents over an API.

    Practice implementing a Tabs component on GreatFrontEnd


    A "Tic-tac-toe" front-end interview question typically involves creating a web-based version of the classic Tic-tac-toe game using HTML, CSS, and JavaScript. Typically, candidates are asked to create a tabs UI component with the following requirements:

    1. Display a 3 x 3 game board with cells that users can interact with.
    2. Allow two players to take turns placing their symbols (X and O) on the board.
    3. Determine and display the winner when a player forms a horizontal, vertical, or diagonal line of three of their symbols.
    4. Allow the option to reset the game for a new round.

    Implementing Tic-tac-toe assesses a candidate's understanding of DOM manipulation, event handling, building a grid-based layout, implementing non-trivial game logic, data structures and algorithms, and state management. Potential follow-up questions include:

    • Extending the game board to N x N with M consecutive symbols to win. A well-designed solution will make this easy.
    • Implementing undo/redo functionality.
    • Implementing an AI for a single-player mode.

    Practice implementing a Tic-tac-toe component on GreatFrontEnd

    Image Carousel

    An "Image Carousel" front end interview question typically involves creating a web-based image carousel or slider. The goal is to implement a user interface that allows users to view a sequence of images, navigate between them. More specifically:

    1. Display a series of images in a carousel format.
    2. Allow users to navigate between images using previous and next buttons.
    3. Include indicators (e.g., dots) to show the current position in the sequence.
    4. Implement a responsive design that works well on various screen sizes.

    For such questions, candidates might be asked to implement without using any external libraries or frameworks. Implementing an image carousel assesses a candidate's understanding of DOM manipulation, event handling, building a slider layout, CSS transitions, and more. There are many ways to implement an image carousel, each with its own pros and cons. Unsurprisingly, this question has tons of possible follow-up questions:

    • Adding animations or transitions to enhance the user experience.
    • Providing accessibility features like keyboard events, correct roles, states, and properties as per the WAI-ARIA Carousel pattern.
    • Loading images dynamically or from an external source.
    • Implementing additional features like autoplay, pause on hover, jumping to a specific image via an imperative API.

    Image carousel interview question, along with its follow-ups, can even evolve into a front end system design question as there are multiple performance optimizations to talk about, with image optimizations being key. It's a great front end interview question to practice.

    Read about how to design an Image Carousel on GreatFrontEnd


    An "Autocomplete" front end interview question typically involves creating an interactive autocomplete feature for a text input field. The goal is to implement a user interface that suggests and displays possible matches or completions as the user types into the input field.

    Here's a simplified example of an Autocomplete front end interview question has the following requirements:

    1. As the user types into the input field, use the input text to fetch and display matching suggestions.
    2. Display the suggestions in a dropdown or similar UI element below the input field.
    3. Allow the user to select a suggestion from the dropdown, updating the input field accordingly.
    4. Fetch suggestions asynchronously from a server (simulated with a mock API or using actual HTTP requests).

    Implementing an autocomplete assesses a candidate's understanding of DOM manipulation, event handling, asynchronous programming (fetching suggestions from a server), familiarity with CSS positioning, form handling, accessibility, performance, and the list goes on. It is the single most important question you can practice as it literally touches on every possible front end interview topic. Like the image carousel question, there are also many possible follow-up questions:

    • Debounce the API search.
    • Providing accessibility features like keyboard events, correct roles, states, and properties as per the WAI-ARIA Combobox pattern.
    • Caching results and showing results from cache.
    • Handling network race conditions.
    • ... and many many more.

    With the amount of things to talk about, this can also evolve into a front end system design question to have further discussions about what other APIs an autocomplete component can include, performance improvements, etc.

    Read about how to design an Autocomplete on GreatFrontEnd

    Most Important User Interface Questions to Master List

    It goes without saying that there are more possible interview questions to practice, but many other interview questions build on top of the skills evaluated for the above questions. If you are short on time, practicing the above questions first will give your the highest return on investment and is highly recommended.

    All the best for your interviews!

  • 5 Most Important JavaScript Questions to Master for Front End Interviews

    Practice these JavaScript questions if you are short on time to prepare for your front end interviews.

    Yangshun Tay
    7 min read
    Dec 18, 2023

    5 Most Important JavaScript Questions to Master for Front End Interviews

    A common frustration when preparing for front end interviews is the sheer volume of questions to practice. There are over a 100 possible front end interview questions available on GreatFrontEnd. How do you choose the best questions to practice to get the highest return of investment on your time?

    Front end interview questions often revolve around a combination of fundamental JavaScript concepts, problem solving skills, layout building skills, and data structures and algorithms. To maximize your efficiency, we recommend practicing the most commonly-asked questions, along with those that touch multiple skills, so that you get all-rounded practice.

    In this list we will cover the most important JavaScript questions to practice. Let's go!


    Debouncing is a crucial technique used to manage repetitive or frequent events, particularly in the context of user input, such as keyboard typing or resizing a browser window. The primary goal of debouncing is to improve performance and efficiency by reducing the number of times a particular function or event handler is triggered; the handler is only triggered when the input has stopped changing.

    import { debounce } from 'lodash';
    // Example usage for a search input field
    const searchInput = document.getElementById('search-input');
    const debouncedSearch = debounce(() => {
    // Perform the search operation here
    console.log('Searching for:', searchInput.value);
    }, 300);
    searchInput.addEventListener('input', debouncedSearch);

    In this example, the debounce function creates a wrapper function that delays the execution of the provided callback until a certain amount of time has passed since the last input event. This helps optimize performance by preventing unnecessary computations or network requests during rapid user input. Adjust the delay parameter based on the specific requirements of your application.

    Debounce is a frequently asked question in front end interviews, especially by big tech companies because it assesses the candidate's understanding of asynchronous programming, closures, and the this callback. The basic version of debounce isn't too hard to implement, so you might be asked to implement additional functionality that's available on Lodash's _.debounce:

    • Leading version: Invoking the callback at the start of the timeout instead of at the end.
    • Trailing version: Invoking the callback at the end of the timeout.
    • Maximum delay: The maximum time the callback is allowed to be delayed before it is invoked.

    Or you could also be asked to implement the Throttle function, which is the sister function of Debounce; it's important to understand the differences between them. Throttle is a common follow-up question to Debounce and vice versa.

    Practice implementing a Debounce function on GreatFrontEnd


    Promise.all() is an important feature in JavaScript for simplifying code needed to handle multiple asynchronous operations concurrently, especially if there are dependencies between them. It takes an array of promises and returns a new promise that resolves to an array of the results when all of the input promises have resolved, or rejects if any of the input promises reject.

    Proficiency with Promise.all() is an indicator of a front end engineer's ability to handle complex asynchronous workflows efficiently and manage errors effectively, making it highly relevant to their daily tasks.

    const promise1 = fetch('https://api.example.com/data/1');
    const promise2 = fetch('https://api.example.com/data/2');
    const promise3 = fetch('https://api.example.com/data/3');
    Promise.all([promise1, promise2, promise3])
    .then((responses) => {
    // This callback is only ran when all promises in the input array are resolved.
    console.log('All responses:', responses);
    .catch((error) => {
    // Handle any errors from any promise
    console.error('Error:', error);

    In this example, Promise.all() is used to fetch data from three different URLs concurrently, and the .then() block is executed only when all three promises have resolved. If any of the promises rejects, the .catch() block is triggered.

    It is a good question to practice for front end interviews because candidates are often evaluated on their mastery of asynchronous programming and whether they know how to implement polyfills. Promise.all() has many sister functions like Promise.race(), Promise.any(), which can also be asked in interviews, so you kill many birds with one stone by practicing Promise.all().

    Practice implementing Promise.all() on GreatFrontEnd

    Deep Clone

    In JavaScript, a deep clone function is used to create a new object or array that is entirely independent of the original object/array. This means that not only the top-level structure is cloned, but all nested objects and arrays within the original structure are also duplicated. In other words, changes made to the cloned object do not affect the original, and vice versa.

    // Original user.
    const user = {
    name: 'John',
    age: 42,
    // Create a deep clone of the user.
    const clonedUser = deepClone(user);
    // Modify the cloned user without affecting the original.
    clonedUser.name = 'Jane';
    // Output the original and cloned user. The original is not affected.
    console.log('Original User Data:', user); // { name: 'John', age: 42 }
    console.log('Cloned User Data:', clonedUser); // { name: Jane', age: 42 }

    While not as frequently asked in interviews as some other questions, deep cloning showcases one's understanding of recursion and the various data types in JavaScript – how to recursively traverse an arbitrary object in JavaScript and process each encountered type.

    Practice implementing the Deep Clone function on GreatFrontEnd

    Event Emitter

    An Event Emitter class in JavaScript is a mechanism that allows objects to subscribe to and listen for events, and to emit events when certain actions or conditions occur. It facilitates the implementation of the observer pattern, where an object (the event emitter) maintains a list of dependents (observers) that are notified of changes or events. In fact, EventEmitter is part of Node.js' API.

    // Example usage
    const eventEmitter = new EventEmitter();
    // Subscribe to an event
    eventEmitter.on('customEvent', (data) => {
    console.log('Event emitted with data:', data);
    // Emit the event
    eventEmitter.emit('customEvent', { message: 'Hello, world!' });

    Implementing an EventEmitter class involves knowledge of object-oriented programming, closures, this callback, and data structures and algorithms fundamentals. Possible follow-up questions include an alternative unsubscribing API.

    Practice implementing an Event Emitter on GreatFrontEnd


    Array.prototype.filter() is a built-in method in JavaScript that allows you to create a new array containing elements that satisfy a certain condition. It iterates over each element in the array and applies a callback function to determine whether the element should be included in the filtered array.

    // Example: Filtering out even numbers from an array
    const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const oddNumbers = numbers.filter(function (number) {
    return number % 2 !== 0;
    console.log(oddNumbers); // Output: [1, 3, 5, 7, 9]

    Array.prototype.filter() is commonly-asked questions in front end interviews by big tech companies, along with its sister functions, Array.prototype.map(), Array.prototype.reduce(), and Array.prototype.concat(). Modern front end development favors functional programming style APIs like Array.prototype.filter() and it is also an opportunity for candidates to demonstrate their knowledge of prototypes and polyfills. It seems easy on the surface, but there's much more to it:

    1. Are you aware of all the parameters accepted by the filter callback? Hint: there are 4!
    2. How does the filter callback handle sparse arrays?
    3. Does your implementation call the callback function with the right this value?
    4. What if the array contents is mutated by the callback function mid-traversal?

    Nailing these edge cases is paramount for acing front end interviews.

    Practice implementing the Array.prototype.filter() function on GreatFrontEnd

    If you're short on time, we recommend practicing these 5 questions, which takes around 3 hours.

    What do you think of these questions? Do you think there are other important questions to cover?

  • How to Evaluate Companies as a Front End Engineer

    Learn the key factors and essential questions that Front End Engineers should explore when evaluating companies.

    Yangshun Tay
    8 min read
    Dec 14, 2023

    How to Evaluate Companies as a Front End Engineer

    Front End Engineering is a nuanced field within Software Engineering and not all companies place equal emphasis on nor have the need for. Choosing the right company is a pivotal decision that can shape the trajectory of a Front End Engineer's career.

    A careful evaluation of potential employers to ensure alignment with one's skills, aspirations, and work preferences. From the nature of business to technological stack to growth opportunities, the considerations are diverse and significant. In this post, we highlight key factors and essential questions that Front End Engineers should explore when evaluating companies. By delving into these factors, Front End Engineers can make informed decisions that not only resonate with their expertise but also contribute to a fulfilling and successful career.

    Here are some of the factors you should be considering when joining a company as a Front End Engineer:

    • Nature of business
    • Technology stack
    • Organization structure
    • Leadership
    • Interview process
    • Compensation
    • Career progression
    • Talent pool
    • Open source & community contributions
    • Design

    Let's dive into each factor.

    Nature of business

    How important is the front end web product to the success of the company? Is web the primary medium in which users consume the product or is web just used for internal dashboards?

    If front end web is important to the company, the company will likely want to hire the best front end engineering talent and compensate them well. As a Front End Engineer, it's also important to join such companies because if/when recession strikes, the less important departments will be the first to be let go. Ideally, you'd want to be in the important departments, be it recession or not.

    Web engineering is important to companies like Figma where the core product is within the browser or a desktop client. On the other hand, web is not so important to a ridehailing company where users are using native mobile apps to book rides.

    Technology stack

    What technology stack is the company on? Does the company bother to keep up with modern front end technologies or are the company's products still on jQuery and Bootstrap 3 with no intention to migrate?

    You don't want to be still working on legacy technologies and not improve your skills at your new job. A stack that includes modern front-end technologies can offer more relevant experience and contribute to your professional growth.

    Good companies should strive to keep their technologies updated as it improves the product quality and helps their employees stay relevant with industry needs.

    Organization structure

    How are engineering teams organized? Are there both front end engineers and back end engineers in the same team or are they in separate teams? How much back end engineering does a front end engineer have to do?

    Both ways of team organization can work, but you'd want to avoid a situation where you are the only front end engineer on a large team primarily made up of back end engineers where there are few senior to learn front end from. You might also be a victim of "bait and switch", where after you join a team, there isn't that much front end work to do and you end up spending most of your time doing back end work. That's not what you're hired to do in the first place, some might like it, but most don't.

    Is there a front end infrastructure team that takes care of common front end engineering needs across the company such as design system components, linting, build, performance, package upgrades, etc?

    If a medium/large-sized company does not have a dedicated front end infrastructure team, there is a good chance that the company does not have too many front end products to warrant the need for a front end infrastructure team. Another reason is that front end engineering quality is not important to the company.


    How much does leadership value front end engineering? How important is brand identity and design to the company?

    The former can be hard to find out as an outsider but you can roughly tell from the quality and aesthetics of the products. This is an important question to find out because leadership decides where to allocate resources to and the more important departments have a higher priority.

    Interview process

    Is there a dedicated front end interview process or is the process the same as for general software engineers (back end heavy)?

    A dedicated front end interview process allows companies to assess candidates more thoroughly and accurately for front end engineering roles. It ensures that the evaluation is aligned with the specific skills and challenges associated with front end development, contributing to effective hiring decisions and the overall success of the engineering team.

    If there isn't a dedicated front end interview process, it could be a sign that leadership does not understand front end engineering well and there's no front end engineers in leadership roles. A front end interview process that does not test the right skills can result in non-optimal hires which brings down the company's quality of front end engineering.


    Does the company pay front end engineers the same as back end / full stack / generalist software engineers?

    If a company pays different specializations of software engineering differently, it's an indication that some specializations are not as important as the rest, aka. Second class citizens. Many companies like Meta and Google pay Front End Engineers as much as Software Engineers, don't settle for less.

    Career progression

    How does the career ladder for a front end engineer differ from a back end engineer? How high is the career ceiling for a front end engineer at the company? What level can you attain by focusing on front end development? What is the composition of backgrounds of the high-level engineers at the company?

    The career ladder for a front end engineer and a back end engineer can vary between companies, and the specific titles and levels may differ. The career ceiling for a front end engineer can be quite high in companies that have complex client products (e.g. Figma, Google Docs, VS Code, etc) or value the importance of user experience and interface design.

    In many other companies, the career ceiling for front end engineers is much lower. For such companies, front end engineers have to look beyond front end work and contribute strategically to the organization's goals in order to rise up the ranks.

    Companies which have high career ceilings for Front End Engineers (without them having to go into management) include Google, Meta, Microsoft, Airbnb, and Figma.

    Talent pool

    How many other front end engineers are there at the company? Who are the other front end engineers at the company? Are they experienced and people I can learn from to level up my front end engineering skills? Are the other front end engineers also passionate about modern front end technologies and frequently share knowledge with each other?

    Understanding the experience level of fellow front end engineers is crucial for evaluating potential learning and mentorship opportunities. Working alongside experienced peers facilitates skill development, as you can glean insights from their expertise and real-world projects.

    It's also important to know if there's a culture for sharing about modern front end technologies; A team that actively shares knowledge and embraces modern technologies suggests a dynamic and forward-thinking environment.

    Open source & community contributions.

    Does the company have any open source projects? Does the company give back to open source by submitting upstream projects? Does the company have an engineering or design blog and their posts of high quality?_

    Having a community presence contributes to the positive brand image of the company and demonstrates a commitment to transparency, collaboration, and giving back to the community. An engineering blog fosters a culture of knowledge sharing within the company and contributes to the professional development of team members.

    A company actively involved in open source contributions is likely to attract developers who are passionate about open source and community collaboration. It can be a deciding factor for top talent when choosing where to work.


    Are the company's products visually appealing? Is there a cohesive brand identity and product interface? Do the products look like they are part of a design system?

    While Front End Engineers don't necessarily have to design, they have to work closely with designers and implement what the designers come up with. A design system provides a structured approach to design and development, promoting consistency, efficiency, and collaboration across teams. It is an essential tool for creating and maintaining a unified and user-friendly interface in software products. Building products without a proper design system will lead to inefficiencies and inconsistencies down the road. A lack of a proper design system or design department could also be an indication that design and front end engineering is not valued by the company.

    Evaluating a company holistically, from its tech stack to its commitment to innovation and the quality of its team, empowers you to make informed choices that align with your professional aspirations. By considering the factors outlined in this guide, you pave the way for a rewarding and fulfilling career, where your skills thrive, and your contributions leave a lasting impact on the digital experiences you help create.

    You are not just choosing a workplace; you are selecting a path that leads to your own advancement, innovation, and success as a Front End Engineer.

  • Best Medium-size Companies for a Fulfilling Front End Career

    Discover the best medium-sized tech companies for a great career as a Front End Engineer.

    Yangshun Tay
    9 min read
    Dec 12, 2023

    Best Medium-size Companies for a Fulfilling Front End Career

    This is part 2 of our top companies series where we gathered the top tech companies for a fulfilling career as a Front End Engineer. Companies are selected based on the following criteria:

    • Nature and variety of web products
    • Complexity and quality of front end engineering
    • Contributions to open source ecosystem

    This post covers the list of the top medium-sized tech companies for front end engineers. For each company, we give a rating out of 5 on the following areas:

    • Projects: Diversity, complexity and uniqueness of the products.
    • Talent: Quality of talent.
    • Design: Emphasis the company places on design.
    • Compensation: How well compensated the employees are.
    • Outlook: The company's outlook.


    Airbnb revolutionized the travel and hospitality industry with its online marketplace for lodging and experiences. The Airbnb platform is a prime example of good design meets good engineering with its user-friendly and aesthetically pleasing interface that is used globally and supports nearly 100 languages.

    Airbnb has made significant contributions to the open source community. Some of their notable open source projects include:

    • JavaScript Style Guide: A very popular style guide and ESLint config for JavaScript.
    • Enzyme: JavaScript testing utilities for React. It is no longer recommended since it relies on testing component implementation and the community has moved towards using React Testing Library.
    • Lottie: A library for rendering animations on the web and mobile.
    • visx: A collection of expressive, low-level visualization primitives for React.
    • Polyglot: A tiny i18n library.
    • React Dates: A datepicker library for React.
    • Hypernova: A service for server-side rendering your JavaScript views.

    Between 2015 to 2020, Airbnb is one of the most innovative companies in the front end space. Airbnb was one of the earliest companies to implement isomorphic/universal rendering on the web with the invention of Rendr, a library to render Backbone.js apps on the server. They also use server-driven UIs to dynamically build pages for web and mobile. Airbnb's front end team also spoke at React Conf 2019 about the process behind their design system.

    Noteworthy front end engineers from Airbnb include Harrison Shoff, known for his work on Airbnb's style guide and visx. Leland Richardson, Jordan Harband, Spike Brehm, Josh Perez, were previously from Airbnb and were instrumental in shaping Airbnb's strong front end engineering culture and establishing the company as a leader in the front end ecosystem.

    On the design front, Airbnb's Design department has a beautifully-designed blog and frequently shares their knowledge and resources with the designer community.

    Airbnb's front end interview process mostly focused on front end coding with just one round of algorithmic coding. However, Airbnb places a high emphasis on cultural fit as the full loop consists of two rounds of behavioral interviews where most companies only have one.

    As of writing, Airbnb has scaled back on their community contributions, possibly due to the global movement towards cost cutting. We no longer see as much front end innovation coming from Airbnb as compared to before. Some of Airbnb's famous libraries like Enzyme and React Dates have been moved out of the Airbnb GitHub organization and don't look maintained. Airbnb's design blog has been paused since 2022 and Airbnb's engineering and design social media accounts have been closed.

    It's important to note that at its core, the Airbnb platform is a CRUD application and the challenges lie in scaling the platform for new verticals; the products themselves are not technically sophisticated client applications like a collaborative editor or design tools. However, if you are a product engineer who enjoys translating beautiful designs into reality and bringing them into the hands of people globally, Airbnb is still a cool and great place to work.

    Rating: Projects (3/5), Talent (4/5), Design (5/5), Compensation (4/5), Outlook (3.5/5)


    A Canadian powerhouse, Shopify empowers businesses with its e-commerce platform, providing business owners with tools to create online stores. As these websites allow a high degree of customization by users while optimizing for performance and SEO, the Shopify platform requires complex, top quality front end engineering.

    Shopify is no stranger to open source and although most of their projects are targeting the Ruby ecosystem, there are a few notable front end projects from them:

    • Remix: Remix is a full stack web framework by the creators of React Routers that was acquired by Shopify and integrated into their products.
    • Polaris: Shopify's design system implemented in React.
    • Hydrogen: A set of opinionated components, utilities, and tools to build custom e-commerce storefronts powered by Remix and Shopify platform.
    • React Native Skia: High-performance React Native Graphics using Skia.
    • Draggable: A lightweight, responsive, modern drag & drop library.

    In recent years, Shopify hired many well-known developers from Google like Ilya Grigorik, Jason Miller (creator of Preact), Jake Archibald, and Surma. Ryan Florence and Michael Jackson of React Router fame ended up at Shopify thanks to the Remix acquisition.

    Shopify is an attractive workplace for front end engineers due to its innovative and varied product range, which offers opportunities for diverse and challenging work. The company is pushing the boundaries of e-commerce web development which demands cutting-edge development to enhance user experiences, providing developers a platform to work on impactful and widely-used applications. Shopify's embrace of the latest technologies and commitment to continuous improvement in the field also contribute to a dynamic and growth-oriented work environment. This, combined with a supportive culture and opportunities for professional development, makes Shopify a rewarding place for front end engineers.

    Rating: Projects (4/5), Talent (4/5), Design (4.5/5), Compensation (3.5/5), Outlook (4/5)


    Figma has become a game-changer in the design software industry, offering a cloud-based interface design tool that enables collaborative work. Figma's apps (Figma and Figjam) are possibly some of the most complex applications to exist as it is extremely challenging to build a performant design tool in the browser that scales for large design files and also offers real-time collaboration.

    While Figma's direct contributions to open source are limited, its impact on the design and development community is substantial. Figma has won over the design market and has begun to focus their efforts on improving the design-to-code workflow with the introduction of Dev Mode and Storybook integration, making the product easier to use for developers.

    Figma’s focus on user interface and experience design aligns well with the core competencies of front end engineering. Furthermore, the company's innovative approach and commitment to cutting-edge technology provide a dynamic environment for professional growth and learning in the field of front end development. There's a good chance that engineers who work at Figma are passionate about design and creating great user experiences; it's always great to be surrounded by like-minded people.

    Rating: Projects (4/5), Talent (4.5/5), Design (5/5), Compensation (4/5), Outlook (4/5)


    Stripe provides payment processing solutions for e-commerce, characterized by their user-friendly and secure interfaces. Their front end work mainly involves creating straightforward yet secure checkouts and payment SDKs, dashboards for businesses to manage their account, prebuilt UI elements for developers who want to create their own checkout flows, and developer platform, which is a world-class example of great developer documentation.

    Stripe does not have too many contributions to open source but front end engineers at Stripe have been instrumental in advancing UI/UX in financial technology. Some of their projects include Markdoc, a powerful, flexible, Markdown-based authoring framework and Sorbet, a type checker for Ruby.

    Stripe is a great company for front end engineers and designers mainly due to its reputation for building elegant, user-friendly products. The company is at the forefront of financial technology, offering developers the chance to work on innovative, high-impact projects that shape the way businesses handle online transactions. Stripe's emphasis on clean, efficient code and cutting-edge technology aligns with the interests of developers who are keen on pushing the boundaries of web development. Additionally, Stripe's collaborative work culture and focus on professional growth make it a great environment for a front end engineering career.

    Rating: Projects (3.5/5), Talent (5/5), Design (5/5), Compensation (4.5/5), Outlook (4/5)


    Vercel is a cloud platform focused on enhancing the development and deployment experience for front end teams. Vercel's platform is designed to make building and deploying as straightforward as possible, emphasizing ease of use, universality, and accessibility. There's seamless integration with major JavaScript frameworks, like Next.js, Remix, Nuxt, etc so that deploying sites built using these frameworks becomes a breeze. On top of hosting, Vercel also provides logs, A/B testing, storage, analytics, performance tracking, and more.

    It's particularly known for creating Next.js, an open source web framework based on React. Next.js is currently the most popular meta framework for building React applications and innovating at breakneck speed especially after members of the React core team left Meta to join Vercel. Besides Next.js, Vercel is also behind projects like SWR, Turborepo, Turbopack, and SWC.

    The Vercel team can be said to be the Avengers of the web development ecosystem, a congregation of top front end engineering talents. Guillermo Rauch, CEO and founder of Vercel, is a well-known figure in the development community for his work on Next.js and Socket.io. Jared Palmer, a key figure in the JavaScript community joined Vercel after they acquired his startup Turborepo. Tobias Koppers, the creator of webpack, joined Vercel to work on the evolution of webpack, Turbopack. As mentioned above, some React core team members like Sebastian Markbåge, Andrew Clark, and Dominic Gannaway, joined Vercel to continue working on React and other projects. The list goes on.

    Vercel has taken Meta's place of being the industry leader in pushing the boundaries of front end innovation. Besides front end hosting, Vercel is also investing in AI with the creation of the Vercel AI SDK and v0, a tool for generative UI design.

    Rating: Projects (4.5/5), Talent (5/5), Design (4.5/5), Compensation (4.5/5), Outlook (4/5)

  • Best Big Companies for a Fulfilling Front End Career

    Discover the best big tech companies for a great career as a Front End Engineer.

    Yangshun Tay
    11 min read
    Dec 11, 2023

    Best Big Companies for a Fulfilling Front End Career

    When you're on the hunt for your next front end engineering role, it's not just about picking any company that'll have you. Companies differ in terms of domains, size, customers, etc. The importance of front end development to a company depends on the company's core offering. Naturally, a company that has a core product that is primarily used on the web will prioritize their front end engineering department, while for companies whose flagship products are mobile apps or hardware, front end development might take a backseat.

    Whether it's working on cutting-edge technologies, being surrounded by inspiring colleagues, or contributing to projects you're passionate about, the right company can elevate your career from ordinary to extraordinary. Choosing the right company can make all the difference between leading a fulfilling career and hitting arbitrary career ceilings.

    In this post, we have gathered the top tech companies for a fulfilling career as a Front End Engineer. Companies are selected based on the following criteria:

    • Nature and variety of web products
    • Complexity and quality of front end engineering
    • Contributions to open source ecosystem

    This post covers the list of the top big tech companies for front end engineers. For each company, we give a rating out of 5 on the following areas:

    • Projects: Diversity, complexity and uniqueness of the products.
    • Talent: Quality of talent.
    • Design: Emphasis the company places on design.
    • Compensation: How well compensated the employees are.
    • Outlook: The company's outlook.

    Meta (previously Facebook)

    Let's get the obvious company out of the way. Meta (previously Facebook), is a major player in social networking, digital marketing, and has recently ventured into the realm of augmented and virtual reality. The complexity of their front end work is showcased in the Facebook and Instagram platforms, which are known for their visually rich interface and smooth user experience. Unbeknownst to most, the most complex (and possibly most important) web application at Meta is their Ads Manager application as it has to display and manage thousands of rows of ad campaigns and also allow advertisers to create ad creatives in various formats for different platforms. The ads manager and business suite surfaces are worked on by thousands of engineers across the company.

    When the Facebook.com redesign was released in 2020, it was considered the gold standard for web applications as it popularized the concepts of SSR, lazy loading, prefetching on navigation, and data-driven dependencies. Today, most new applications at Meta are built using this JavaScript-centric tech stack.

    If I were to name a company that has the most impact on the open source front end ecosystem, it has to be Meta. Meta revolutionized how UI was built with the invention of React and React Native, introduced new data fetching approaches with GraphQL, built Jest, a feature-rich test runner that displaced then-frontrunner Mocha, made building documentation websites easy with Docusaurus, and Yarn, a package manager that was a huge improvement over npm at the time of its release. Meta has open sourced technology in almost every aspect of front end development most of which achieved widespread adoption at one point in time, which speaks volumes about the standard of Meta's front end engineers and importance of front end development to the company. Because much of Meta's front end technologies are open source and widely-adopted, new developers who had prior experience with these technologies will have an easier time when onboarding.

    Meta is continuing to lead innovation in the front end space with the development of React Server Components, Server actions, React forget, and cross-platform React components so that users can share components between web, mobile, and VR environments.

    Notable figures in front end development from Meta includes Jordan Walke, the creator of React and Reason; Joe Savona, who is currently working on the React Forget compiler; Dan Abramov, Sebastian Markbåge, Lauren Tan, Andrew Clark, Dominic Gannaway, Brian Vaughn, Sophie Alpert, Rick Hanlon, who have worked / are still working on React, Christopher Chedeau of Prettier and CSS-in-JS fame; and Christoph Nakazawa, who worked on React Native, Jest, and Metro.

    Meta's front end interview process is one that heavily favors Front End Engineers as it is focused on practical front end domain knowledge without excessive emphasis on algorithmic knowledge.

    While Meta is a great place for Front End Engineers, it can be stressful working there. The company is known for its fast-paced and results-driven work environment that rewards high performers, which can contribute to tight deadlines and stress. Employees may also face public scrutiny due to the company's high-profile nature and history with privacy concerns and misinformation. The demanding nature of the work and high expectations, coupled with potential challenges to work-life balance, are factors individuals should consider. On the engineering side of things, Meta is stuck using Flow for writing type-safe JavaScript, which is almost no longer used outside of Meta. However, there are some similarities with TypeScript, so the learning curve should not be too huge.

    Rating: Projects (4/5), Talent (5/5), Design (4/5), Compensation (4.5/5), Outlook (3/5)


    Google, a global technology leader, is best known for its search engine. However, the company's reach extends far into areas such as video streaming, cloud computing, AI, consumer hardware, and software solutions. Some of their products that showcase intricate front end development include YouTube, the world's top video streaming website; Google Maps, with its interactive maps and street views; Gmail, a widely-used email service featuring a sophisticated interface; and Google Docs, an online word processor offering real-time collaboration.

    Google's commitment to the front end open source ecosystem is evident in projects like:

    • Angular: One of the big three web application frameworks, popular among enterprise applications. The newly-released Angular 17 renews developers' confidence in the framework and that Google is still investing in it.
    • Chromium: The browser that powers Google Chrome. Did you know that other major browsers like Microsoft Edge, Opera, and Arc are also powered by Chromium?
    • Flutter: Google's approach of building cross-platform, natively compiled apps for mobile, web, and desktop from a single codebase. Dart is the primary language for developing Flutter apps.
    • Dart: A programming language by Google that can be transpiled to JavaScript but can also be used to build server, desktop, and mobile applications. Within Google, Dart is primarily used for building ads products.

    Google is home to many prominent figures in the front end community because they regularly create great guides and content for web development like web.dev and YouTube channels like Chrome for Developers. Paul Irish is known for his work on Chrome DevTools and other web development resources; Addy Osmani, Software Engineer on Google Chrome and author of numerous technical books; Minko Gechev, tech lead and manager for Angular.

    Google's front end interview process has a good balance of algorithmic knowledge and domain knowledge. There are pure algorithmic rounds and front end coding questions will also require a good grasp of software design and good data structure choice.

    Working at Google, while offering numerous benefits, comes with potential downsides. The large organizational structure of the company may pose challenges in communication and decision-making, and frequent reorganizations can create uncertainty for employees. Projects are often canceled and I have lost count of the number of instant messaging applications that were built, killed, and rebuilt. Despite these downsides, Google's cutting-edge projects, great salary, career growth opportunities, and focus on employee well-being continue to attract top talent.

    Rating: Projects (4.5/5), Talent (4.5/5), Design (4/5), Compensation (4/5), Outlook (4/5)


    Microsoft, a household name in software, offers a range of products from operating systems to cloud services and business solutions. Besides Bing and Edge, the Microsoft 365 suite brings traditional workplace offerings like Word, Excel, and PowerPoint to the web which are complex web applications that require a high level of front end to create.

    For a long time, Microsoft was focused on desktop applications but in recent years, Microsoft has increased investment in developing the web ecosystem and have established themselves as one of the most important companies to the future of front end development with the following projects:

    • TypeScript: A popular type-safe superset of JavaScript. TypeScript mastery is considered a core skill these days.
    • Visual Studio Code: A free, highly customizable cross-platform code editor. It is one of the most popular IDE for web development and comes with out-of-the-box TypeScript integration.
    • Playwright: A framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API.
    • npm: The de facto package manager for the JavaScript ecosystem is currently owned by GitHub, which is owned by Microsoft.

    Moreover, Microsoft is heavily investing in AI. They're the largest investors in OpenAI and OpenAI utilizes Azure as its primary cloud provider to train and run its large-scale AI models. Microsoft has been integrating OpenAI's technologies into its products, like GitHub Copilot, Microsoft 365 products and Bing search engine, among others. The partnership with OpenAI gives it a competitive edge in the AI race, especially against other tech giants like Google and Amazon. By closely working with and funding one of the most advanced AI research labs, Microsoft positions itself at the forefront of AI innovation.

    In a company as large as Microsoft, bureaucratic processes are often in place. This can mean slower decision making, more layers of management, and a need to navigate through a complex corporate structure to get things done. For some, this can feel restrictive and stifle creativity.

    Rating: Projects (4/5), Talent (4/5), Design (3.5/5), Compensation (3.5/5), Outlook (4/5)


    The only Chinese technology company on the list, ByteDance is most famous for its social media app TikTok, which is a highly addictive platform that prioritizes mobile-first short-form videos. While TikTok content is primarily consumed on mobile platforms, ByteDance has a large suite of enterprise offerings for the web, like Lark and BytePlus.

    ByteDance is actually pretty active in the open source community, though their projects are less known compared to those from Western big tech companies. One of ByteDance's most famous open source projects is rspack, a Rust port of webpack. Other notable projects include IconPark, a high quality, highly customizable icon set and Xigua player, a modern video player for the web.

    ByteDance is home to many talented individuals like Zack Jackson (Creator of module federation) and Dexter Yang (Author of Spellbook of Modern Webdev). Anthony Fu, one of the most prolific open source leaders in recent years, used to work at ByteDance.

    In terms of the hiring process, ByteDance's front end interview process is one of the toughest to crack due to their wide pool of questions that tests the candidates' breadth and depth in the domain. Candidates can expect to answer tough trivia questions about their favorite JavaScript framework and the front end domain. All of algorithms, JavaScript utilities, UI coding, and system design questions can also be asked.

    ByteDance is very similar to Meta in many ways and I often tell people they're the Meta of China – their focus on social products, performance-driven culture that disproportionately rewards high performers, mindset which encourages moving fast and taking ownership, open sourcing innovative technologies, etc.

    However, being a Chinese company, might have a corporate culture that differs significantly from Western norms. Engineers from different cultural backgrounds might find it challenging to adapt to these differences in work style, communication, and management practices. TikTok is constantly under scrutiny in the United States due to national security concerns related to its Chinese ownership and there's no knowing if or when the app will be banned in the US, which will hurt the business greatly.

    Rating: Projects (4/5), Talent (4/5), Design (4/5), Compensation (4/5), Outlook (4/5)


    Netflix, the leading entertainment streaming service, is renowned for its personalized user interfaces and seamless streaming experience across devices. Netflix is one of the best places for front end engineers not because of Netflix.com; it is their suite of complex web-based studio technologies that makes working there exciting.

    Netflix's primary contribution to the open source community is Falcor, a JavaScript library for efficient data fetching. Notable front end developers from Netflix include Jafar Husain, known for his work on reactive programming and JavaScript frameworks. Jafar has also worked at Meta on GraphQL.

    Netflix's company culture, often compared to a professional sports team, is centered around performance, collaboration, and a high degree of freedom and responsibility. This culture is detailed in their "Netflix Culture: Seeking Excellence" document and is widely recognized in the business world for its unique approach. Netflix is known for paying top of the market salaries for Software Engineers and mostly in base salary. Employees at Netflix have the flexibility to decide how much of their compensation is in cash or stock options. On the other hand, the dream team culture can lead to workplace competitiveness and increased stress as employees may feel they must constantly prove their worth to remain with the company.

    Rating: Projects (3.5/5), Talent (4/5), Design (4/5), Compensation (5/5), Outlook (4/5)

  • How to Handle Large Datasets in Frontend Applications

    Explore powerful techniques for handling large datasets in React application, including pagination, infinite scroll, and windowing

    Nitesh Seram
    8 min read
    Jun 17, 2023

    How to Handle Large Datasets in Frontend Applications

    Originally posted on https://niteshseram.in.

    Handling large datasets is a common challenge in frontend applications. As the amount of data grows, it can lead to performance issues, such as slow loading times and unresponsive user interfaces. In this blog, we will explore different methods to effectively handle large datasets in React applications. We will discuss techniques like pagination, infinite scroll, and windowing. By implementing these strategies, we can ensure that our frontend application remains fast and efficient, even when dealing with large amounts of data.

    Understanding the Performance Problems with Large Datasets

    Before we dive into the different methods of handling large datasets, let's first understand the performance problems associated with them. When an application tries to render or manipulate a large amount of data in a list, it can cause significant performance issues. This is because rendering a large number of DOM elements can be time-consuming and resource-intensive.

    To illustrate this, let's create a sample React application that renders a list of 10,000 records. By examining the performance of this sample application, we can better understand the challenges of handling large datasets.

    To get started, create a new React application using the create-react-app command in your terminal:

    npx create-react-app large-dataset-app

    Once installed, open the App.js file in the src directory and replace the existing code with the following:

    const data = new Array(10000).fill().map((_, index) => ({
    id: index,
    name: `Temp Name ${index}`,
    email: `Temp Email ${index}`,
    function App() {
    return (
    {data.map((item) => (
    <div key={item.id}>
    export default App;

    In this code, we generate an array of 10,000 objects, where each object represents a record in our dataset. We then use the map function to render each item in the array as a <div> element. Each <div> contains the name and email of the corresponding item.

    Now, start the React application by running the following command in your terminal:

    npm start

    Open your browser and navigate to http://localhost:3000. You will notice that it takes some time for the page to load, and scrolling through the list may also be slow. This is because rendering 10,000 DOM elements at once can cause performance issues.

    Pagination: Rendering Data in Pages

    One way to handle large datasets is by implementing pagination. Pagination allows you to render data in pages, rather than all at once. By controlling the amount of data shown on the page, you can reduce the stress on the DOM tree and improve performance.

    There are several UI libraries in React that provide pagination components, such as react-paginate. However, if you prefer not to use a UI library, you can implement pagination manually.

    To illustrate this, let's modify our sample application to include pagination. First, install the react-paginate library by running the following command:

    npm i react-paginate

    Next, open the App.js file and replace the existing code with the following:

    import { useState } from 'react';
    import ReactPaginate from 'react-paginate';
    const data = new Array(10000).fill().map((_, index) => ({
    id: index,
    name: `Temp Name ${index}`,
    email: `Temp Email ${index}`,
    function App() {
    const [currentPage, setCurrentPage] = useState(0);
    const itemsPerPage = 10;
    const pageCount = Math.ceil(data.length / itemsPerPage);
    const offset = currentPage * itemsPerPage;
    const currentData = data.slice(offset, offset + itemsPerPage);
    const handlePageChange = (selectedPage) => {
    return (
    {currentData.map((item) => (
    <div key={item.id}>
    export default App;

    In this code, we use the useState hook to manage the current page state. We calculate the number of pages based on the total number of records and the desired number of items per page. We then use the slice method to get the current data to be displayed on the page.

    The ReactPaginate component renders a pagination UI with previous and next buttons, as well as page numbers. The onPageChange event handler updates the current page state when the user clicks on a page number.

    Now, when you run the application, you will see that the data is rendered in pages, with only a subset of records shown at a time. This helps to improve the performance of the application by reducing the number of rendered DOM elements.

    Infinite Scroll: Loading Data on Demand

    Another approach to handling large datasets is through the infinite scroll. Infinite scroll involves loading data incrementally as the user scrolls down the page. Initially, only a subset of data is loaded, and more data is appended as the user reaches the end of the list.

    There are various ways to implement infinite scroll in React, and one popular library for this purpose is react-infinite-scroll-component. To use this library, install it by running the following command:

    npm i react-infinite-scroll-component

    Next, open the App.js file and replace the existing code with the following:

    import { useState } from 'react';
    import InfiniteScroll from 'react-infinite-scroll-component';
    const data = new Array(10000).fill().map((_, index) => ({
    id: index,
    name: `Temp Name ${index}`,
    email: `Temp Email ${index}`,
    function App() {
    const [items, setItems] = useState(data.slice(0, 20));
    const fetchMoreData = () => {
    setTimeout(() => {
    setItems((prevItems) => [
    ...data.slice(prevItems.length, prevItems.length + 20),
    }, 1500);
    return (
    hasMore={items.length < data.length}
    {items.map((item) => (
    <div key={item.id}>
    export default App;

    In this code, we use the useState hook to manage the item's state. Initially, we load the first 20 items from our dataset. The fetchMoreData function is called when the user scrolls to the end of the list. It appends the next 20 items to the existing items using the spread operator.

    The InfiniteScroll component from react-infinite-scroll-component wraps the list of items. It takes the current length of the items as the dataLength prop, the fetchMoreData function as the next prop, and a boolean value to indicate whether there is more data to be loaded.

    When you run the application, you will notice that the data is loaded incrementally as you scroll down the page. This approach improves the user experience by providing a seamless scrolling experience while efficiently loading and rendering the data.

    Windowing: Efficiently Rendering Large Lists

    Another technique for handling large datasets is windowing. Windowing involves rendering only the visible portion of a list to the screen, rather than rendering all the items at once. This helps to reduce the number of DOM elements and improves performance.

    One popular library for windowing in React is react-window. It provides a set of components for efficiently rendering large lists. To use react-window, install it by running the following command:

    npm i react-window

    Next, open the App.js file and replace the existing code with the following:

    import { FixedSizeList as List } from 'react-window';
    const data = new Array(10000).fill().map((_, index) => ({
    id: index,
    name: `Temp Name ${index}`,
    email: `Temp Email ${index}`,
    const Row = ({ index, style }) => (
    <div style={style}>
    function App() {
    return (
    <List height={400} itemCount={data.length} itemSize={80} width={300}>
    export default App;

    In this code, we define a Row component that renders each item in the list. The FixedSizeList component from react-window is used to render the list. It takes the height and width of the list, the total number of items, and the size of each item as props.

    When you run the application, you will see that only a portion of the list is rendered at a time, based on the height of the list. As you scroll through the list, the windowing technique efficiently renders only the visible items, resulting in improved performance.

    You might be wondering what’s the difference between what the react-infinite-scroll-component and react-window do. The difference is that in react-infinite-scroll-component load data incrementally as the user scrolls. It dynamically adds more items to the list as needed, creating an illusion of infinite content. react-window, on the other hand, renders only a subset of the list items that are currently visible in the viewport, reusing DOM elements as the user scrolls.

    Due to its simpler API and automatic handling of scrolling, react-infinite-scroll-component may be easier to set up and use for basic infinite scrolling needs. However, it may not perform as well with extremely large data sets or complex list items since it keeps all rendered elements in the DOM. In contrast, react-window's windowing technique ensures that only the visible items are rendered, resulting in improved performance and reduced memory footprint for large lists.


    Handling large datasets in frontend applications can be challenging, but there are various techniques available to address this issue. By implementing pagination, infinite scroll, windowing, or using specialized libraries like react-virtualized or react-window, you can effectively manage large amounts of data while maintaining optimal performance.

    In this blog, we explored different methods of handling large datasets in React applications. We discussed pagination as a way to render data in pages, infinite scroll for loading data on demand, windowing for efficiently rendering large lists, and libraries like react-window that provide additional features for handling large datasets.

    Remember to consider the specific requirements and constraints of your application when choosing a method for handling large datasets. Each approach has its advantages and trade-offs, so it's important to evaluate which technique best suits your use case.

    By implementing these strategies, you can ensure that your frontend applications remain fast, responsive, and user-friendly, even when dealing with large amounts of data.