GreatFrontEnd

How Airbnb Front End is Built 🗺️ Most developers might know Airbnb for their popular JavaScript style guide—but apart from that, Airbnb also has multiple open source projects they utilize and contribute to the developer community. This list shows Airbnb's dedication to building robust, scalable solutions, often using innovative approaches that push the boundaries of front end development. In opening up many of these tools, Airbnb contributes to the broader developer community and fosters collaboration. Each technology plays a vital role in crafting a platform that empowers travelers and hosts alike, connecting people with unique experiences around the world. -- ➡️ Join 500,000+ engineers nailing front end interviews with Ex-FAANG Prep & practice > https://lnkd.in/gZXG_U_K -- #airbnb #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javaascript #react #css #UI #greatfrontend

💡 What I'd do differently if I were to build https://greatfrontend.com from scratch 💡 Last week, I shared about the tech stack behind GreatFrontEnd, a front end interview preparation platform containing 200+ routes, 3000+ files, serving 50k MAU. Someone asked me what I'd change if I could do it all over again today. Here's what: → Separate back end and front end server: Currently the full app stack is on Next.js, Prisma and tRPC, which is fine for the current scale. However, this limits the ability to reuse the API for potential clients like mobile apps. I would build a dedicated back end using Laravel / Django / Ruby on Rails, with a GraphQL API → ORM: For GFE's current scope, Prisma is fine. But Prisma lacks other useful crucial features like triggers and listeners. Also there's no popular way of doing ACL (access control / permissions) in the JavaScript ecosystem and we ended up writing custom permission checks. In Rails and Django, there are plenty of ACL libraries available → Data fetching: tRPC + React Query → GraphQL + Relay. tRPC + React Query is fine for my monolithic site, but as per the point above, if I have to support mobile clients, GraphQL would be a better fit. I had a really good experience using GraphQL + Relay at Meta. It probably won't be as seamless outside of Meta, but I'd want to try it out. → Auth: Supabase Auth → Lucia Auth / Auth.js. I'm not at the expensive tier of Supabase yet but I'm getting there. Supabase auth lacks customizability of some auth flows. In future perhaps I'll just use established auth libraries or roll my own (famous last words?) → Hosting: Vercel is the best place for hosting Next.js sites and has served as well. I don't mind continuing paying for Vercel but Cloudflare support for hosting Next.js seems to be improving and I'd like to evaluate Cloudflare as a hosting provider as well to make informed decisions. → i18n: Format.js doesn't scale well for large apps when all the strings are within a JSON file, and the syntax is also very clunky. Check out Meta's FBT library for what I'd call ideal syntax. My ideal i18n library doesn't exist, if I have time I'll build a new library that does this better. → Linting: ESLint → Biome. It's time to move towards Rust-based tooling like Biome as ESLint is becoming pretty slow for the size of our code. → Separate sites: GFE contains two products – Interviews and Projects, both of which have quite a few number of pages. Currently they're lumped within a single Next.js project, which causes build time to be quite long (~10 mins). When fixing a bug in Interviews, even if nothing has changed in Projects code, I'd still have to pay the cost of building them. It'd be better to have them as separate Next.js projects, they can be under the same domain or hve different subdomains. #prisma #graphql #relay #eslint #cloudflare #laravel

How Airbnb Resizes Text for Accessibility Airbnb has gone the extra mile to make its platform accessible to everyone, including users with vision impairments. Following WCAG Guideline 1.4.4: Resize Text (Level AA), Airbnb ensures text can scale up to 200% without breaking functionality—enhancing readability while maintaining usability. 🧩 Solving Accessibility Challenges Simply relying on the browser zoom often causes issues, especially on mobile. Zooming in can make critical content inaccessible, frustrating users. To tackle this, Airbnb developed Font Scaling, allowing text to resize independently of page zoom. This keeps layouts intact while boosting readability, especially on smaller screens. 🛠️ How They Did It - Rem Units: Airbnb switched from pixels to rem units, which scale relative to the root font size, enabling consistent resizing across devices. - Automation: They automated the conversion from pixels to rems, streamlining the process for designers and developers. - Cross-Browser Compatibility: Special attention ensured seamless scaling across browsers, even tricky ones like Mobile Safari. Since adopting Font Scaling, Airbnb has significantly reduced accessibility complaints and delivered a smoother experience for users with vision difficulties. By blending innovation with inclusivity, Airbnb proves that thoughtful design can open doors for everyone. -- ➡️ Don’t let front-end interviews hold you back. Prep with ex-Big Tech experts, trusted by 500,000+ engineers > https://lnkd.in/g6mgMRcJ -- #airbnb #app #website #accessibility #frontend #frontenddevelopmen #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javascript #react #css #UI #greatfrontend

Front End Interview Questions - Uber 🚗 Uber bridges the gap between the physical and digital worlds, making it easy for people to move around with just a tap. Their vision goes beyond simply transporting individuals from one place to another; it's about fostering safe and sustainable mobility for everyone. With a strong commitment to accessibility, safety, and sustainability, Uber aims to create solutions that break down social, cultural, and geographical barriers. That’s why the company always looks for seasoned Front End software engineers capable of elevating pivotal user experiences—such as customer support and personalized interfaces—to new heights. Below, we have included top front-end interview questions from Uber you should know to level up your technical interview preparation. ---------- ➡️ Read more in-depth questions from Uber and other leading tech companies here > https://lnkd.in/dzWGzitf ---------- #uber #frontendjob #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javascript #react #css #UI #greatfrontend

Inside Reddit’s Image Optimization 🖼️ Reddit’s engineering team faced the challenge of optimizing billions of daily images in-house to cut costs and improve performance, moving away from costly third-party solutions. They discovered that converting GIFs to MP4s, though only 2% of their requests, made up 70% of image optimization costs. This was because their previous vendor charged the same rate for both cached and uncached GIFs, which are large and resource-intensive. To tackle this, Reddit built two key internal services: 1. Gif2Vid Service The Gif2Vid Service converts GIFs to MP4s in real-time, dramatically cutting file sizes and processing requirements. GIFs are heavy, inefficient formats compared to MP4, so converting an 8MB GIF can reduce it to around 650KB. Some GIFs over 100MB can shrink to 10MB as MP4s. Beyond cost savings, this new service cuts latency from over 20 seconds (in some cases up to 30) to a much smoother 4 seconds at the 99th percentile, improving the user experience significantly. 2. Image Optimizer Service Reddit’s Image Optimizer efficiently handles tasks like resizing, cropping, and blurring images. Built using libvips (a high-speed image-processing library in C), the service runs 3-4 times faster than older solutions. To connect libvips with Reddit’s Go backend, the team used govips, a Go wrapper around libvips, and implemented a smart cropping algorithm that adapts to content. Bringing image optimization in-house resulted in a 99.1% cost reduction on animated GIFs, lowered encoding times, and a 20% decrease in data for static images—creating a faster, smoother experience for Reddit users. -- ➡️ Don’t let front-end interviews hold you back. Prep with ex-Big Tech experts, trusted by 500,000+ engineers > https://lnkd.in/ggAsXU_b -- Source: https://lnkd.in/gdzaVs2q #Reddit #webdevelopment #frontend #website #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience

How Notion sped up in the browser with WASM SQLite ⚡ Notion has recently improved its web application performance by implementing WASM SQLite. This enhancement aims to speed up page navigation and overall user experience. Here’s a detailed look at how this technology works and the challenges it addresses. What is WASM SQLite? WASM (WebAssembly) is a binary instruction format that allows code to run in web browsers at near-native speed. SQLite is a lightweight database engine that can store data locally on a device. By combining these two technologies, Notion enables faster data access directly in the browser, reducing reliance on external servers. Key Improvements - Faster Navigation: The integration of WASM SQLite has improved page navigation times by 20% across all modern browsers. For users in regions with slower internet connections, such as Australia, China, and India, the improvements are even more pronounced—up to 33% faster. - Efficient Data Handling: By using SQLite for local caching, Notion minimizes delays associated with fetching data from external servers. This is particularly beneficial for users who frequently switch between pages or access shared documents. Core Technologies Used - Origin Private File System (OPFS): This modern browser API allows Notion to read from and write to files on a user's device securely. It serves as the persistence layer for the WASM SQLite library. - Web Workers: These allow background tasks to run separately from the main thread of the browser, ensuring that heavy computations do not slow down the user interface. - Shared Workers: This architecture manages which tab is active and can write to the SQLite database, preventing data corruption that could occur if multiple tabs tried to access the database simultaneously. How It Works - Web Workers Setup: Each tab in Notion has its own Web Worker that can create or load an SQLite database file using OPFS. This setup allows for efficient data processing without blocking user interactions. - Shared Worker Management: The Shared Worker identifies which tab is currently active and routes database queries accordingly. Only the active tab can write to the database, while other tabs can still read from it, ensuring data integrity. - Concurrency Control: The architecture prevents corruption issues that arose when multiple tabs attempted to write to the database at once. By managing write access through the Shared Worker, Notion ensures that only one tab can modify data at any given time. -- ➡️ Don’t let front-end interviews hold you back. Prep with ex-Big Tech experts, trusted by 500,000+ engineers > https://lnkd.in/gJizN7DS -- Source: https://lnkd.in/grdrEG3m #Notion #browser #performance #webdevelopment #frontend #website #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer

How Svelte stands out from Traditional Frameworks ⭐ Svelte is a JavaScript framework that redefines how user interfaces are built by leveraging compile-time optimization. Unlike traditional frameworks such as React, which depend on a virtual DOM for rendering, Svelte compiles components into highly efficient JavaScript operations during the build process. This innovative approach not only results in a remarkable bundle size—with Svelte minified and gzipped version clocking in at just 1.8 KB, compared to React's 44.5 KB—but also enhances performance significantly. 💡 Key Features of Svelte 🔸 Compile-Time Optimization: Svelte shifts much of the work to compile time, allowing for direct manipulation of the DOM. This leads to reduced runtime overhead and improved application speed. 🔸 Reactivity: The framework employs a simple reactivity model that allows developers to easily manage state and update the UI in response to changes without complex boilerplate code. 🔸 Ease of Use: Svelte syntax is intuitive and straightforward, making it accessible for both beginners and experienced developers. This simplicity fosters rapid development and prototyping. 🔸 Accessibility: Many Svelte libraries prioritize accessibility by building in guidance to encourage adherence to WAI-ARIA standards, ensuring that applications are usable for individuals with disabilities. ⚡ Uniqueness of Svelte Svelte's primary uniqueness lies in its compilation strategy, which allows developers to write declarative code while the framework handles optimization behind the scenes. This results in applications that are not only performant but also easier to maintain due to reduced complexity in the codebase. The absence of a large runtime library means that applications can load faster and consume less memory compared to those built with other frameworks. Have you used Svelte in your projects? Let us know in the comments below! -- ➡️ Join 500,000+ engineers nailing front end interviews with Ex-FAANG Prep & practice > https://lnkd.in/gWGwvet5 -- #svelte #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javaascript #greatfrontend

Breaking down the tech stack we used to build https://greatfrontend.com, a front end interview preparation platform containing 200+ routes, 3000+ files, serving 50k MAU. ⚛ JS library: React – It's by far the most popular JS library with mature ecosystem and still rapidly innovating. It's going full stack! 🔥 Rendering / Metaframework: Next.js – Supports multi-paradigm rendering, serverless hosting, and always on top of latest React features (too cutting edge in fact). Backed by Vercel and has good community support 💅 CSS: TailwindCSS – Scales well for medium-large code bases, no more naming necessary, our Figma design system is designed using Tailwind tokens 🎨 Design System: Radix UI + custom styling – Radix UI is battle tested. We want absolute control over my styling so we're not using an existing UI library 🐶 Data fetching: tRPC + React Query – The closest data fetching library that is like Relay. With, tRPC gives typesafety which is most of what I look when performing data fetches 🌐 i18n: Format.js + custom i18n routing – The closest i18n library that is similar to Meta's internal i18n library in terms of usage and doesn't require Babel config changes 🗄 Database: PostgreSQL – Postgres is leading the DB ecosystem, popular, and has many features 🗺 ORM: Prisma – Most mature ORM in the JavaScript ecosystem. Drizzle wasn't as popular back then. We needed a way to generate migration files and execute them on dev vs prod dbs 🔐 Authentication: Supabase Auth – Database is hosted on Supabase, it was convenient to also use their Auth. Integrating GitHub and Google was just a config change ⌨ Language: TypeScript – Using plain JavaScript is like driving without seatbelts. It's a bad idea to drive without seatbelts on ⚙ Linting: ESLint – Mature linting system. It's becoming quite slow given the project size. Might move to Biome in future 🧑💻 Code editor: Monaco Editor – Many users are already use VS Code, including myself. It's a bit heavy but very powerful ⬇️ Markdown: MDX + Rehype + Remark – MDX has taken over Markdown engines. It's architecture and plugin system makes it super extensible 🪵 Logging: Axiom – Affordable monitoring and logging service #react #nextjs #javascript #tailwindcss #eslint #frontend

Airbnb Front End Interview Questions 🌴 Airbnb started as a small startup and quickly became a major player in the travel industry. This success is largely due to Airbnb's dedication to providing quality experiences for customers, hosts, and employees. As a software engineer at Airbnb, you'll get to be part of this commitment and help create amazing experiences for everyone involved. The company‘s core philosophy is this: engineers own their own impact. Each engineer is individually responsible for creating as much value for our users and for the company as possible. That’s why they hire candidates primarily for problem-solving. Here are some top front-end interview questions you should be prepared to answer during your interview at Airbnb. ➡️ ➡️ Read more in-depth questions from Airbnb and other leading tech companies here > https://lnkd.in/g3baDaAW #airbnb #frontendjob #frontend #frontenddevelopmen #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javascript #react #css #UI #greatfrontend

JavaScript code blocks on GreatFrontEnd are going to get a huge upgrade soon – they will be executable and modifiable! Super useful when learning a new concept and you want to change the code to see how it behaves. Courtesy of our wonderful intern Minh Man Tram! Preparing for your front end interviews? All you need is https://greatfrontend.com #javascript