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

How Airbnb ships features faster with a server-driven UI system⚡ Airbnb uses a server-driven UI (SDUI) system, called the Ghost Platform, to iterate quickly and launch new features across the web, iOS, and Android. By standardizing UI components, it allows developers to reuse sections easily, making the process faster and more consistent. What is Server-Driven UI? Traditionally, each client platform (web, iOS, Android) transforms backend data into UI, which can lead to inconsistencies. SDUI changes this by allowing the server to dictate both the data and UI layout (in formats like JSON), meaning updates are easier to manage and more consistent across platforms. Why Use Server-Driven UI? SDUI centralizes UI control on the backend, meaning each client platform uses native components to render the server-defined UI, simplifying app development and ensuring a unified experience. The Ghost Platform (GP) Airbnb’s Ghost Platform allows rapid, consistent updates across devices. GP leverages TypeScript, Swift, and Kotlin to enable server-driven features, and centralizes complex logic on the backend. This results in faster rollouts and a smoother experience for users. Unified Schema via Viaduct GP’s single GraphQL schema, Viaduct, ensures universal data rendering for all platforms, making development efficient and consistent. Core Components of GP - Sections: Reusable UI components that work independently of business logic. - Screens: Define layout and arrange sections dynamically. - Actions: Handle user interactions, adapting to different behaviors. How GP Works - The Ghost Platform sends UI and data to the client. - The client renders components with the standardized data model. - Layout and interactions are dynamically configured with screens and actions. -- ➡️ Don’t let front-end interviews hold you back. Prep with ex-Big Tech experts, trusted by 500,000+ engineers > https://lnkd.in/gaDx-6M7 -- Source: https://lnkd.in/gXzRGFAr #Airbnb #UIDevelopment #webdevelopment #frontend #website #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience

Only front-end devs will understand… 🥵 Which of these tests your patience daily? #frontend #programmerhumor #softwareengineer #frontenddeveloper #tailwind #css #webdeveloper

How Facebook Maximizes Accessibility 🔎 Facebook is committed to making its platform more accessible for its 3 billion monthly users, acknowledging that 1 in 6 people worldwide lives with a disability. Recently, the platform underwent a major redesign, embedding accessibility features directly into its core infrastructure and setting a new bar for digital inclusivity. 🔑 Key Accessibility Strategies: - Early Accessibility Integration: Advanced tools are embedded from the start, helping to prevent issues before they occur. - Linting and Flow Typing: Consistent validation of accessible markup, ensuring interactive elements have the right labels. - Scalable Font Sizes: Text resizing is managed using rems, making adjustments smoother for visually impaired users. - Logical Headings: React Context maintains a screen reader-friendly heading structure, simplifying navigation. - Centralized Keyboard Commands: A unified API for keyboard shortcuts boosts accessibility and debugging. - Real-Time Analysis Tools: Runtime checks provide instant feedback, catching issues as they arise. - Reusable Accessible Components: React components with built-in accessibility features ensure consistent experiences. - Focus Management and Screen Reader Announcements: Enhanced focus control and live updates provide seamless feedback. 🌐 Source: https://lnkd.in/gHyS9a7T What are your thoughts? Let us know in the comments below! -- ➡️ Don’t let front-end interviews hold you back. Prep with ex-Big Tech experts, trusted by 500,000+ engineers > https://lnkd.in/ggUDv3Xk -- #facebook #website #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #accessibility

Want to stand out as a software engineer? Peek beneath the abstraction layers and understand how the technology works. Some technical concepts I'm glad I have gained a better understanding of which have helped accelerate my career as a Software Engineer: - How the Internet works - How the browser renders a webpage - How JavaScript engines work - How React works (benefits of components, Virtual DOM, reconciliation) - How programming languages are parsed and executed (tokenization, lexical analysis, ASTs, transformation, generation) - How front end metaframeworks work (e.g. Next.js, Docusaurus) - What goes into popular full stack web frameworks (e.g. Rails, Django) - The various rendering paradigms (CSR, SSR, SSG, etc) and when to use which - How typechecking works - How linting and formatting works - Various components in distributed systems and their strengths - How databases work - How version control works Real world problems are messy and complex and need real understanding. Having a deep understanding allows you to adapt and apply them in unpredictable situations. At the very least, you should have a good understanding of the tools and technologies you use frequently. Often when I run into issues, having deep understanding helps me to debug based on intuition. It's hard to explain, but it's a magical experience to be able to guess why something is behaving that way and turn out to be right. Having a deep understanding will help you tackle even unfamiliar problems with confidence + improved productivity.

How Medium Editor Works ✍️ With its advanced architecture, Medium stands out among web-based text editors because it overcomes the inherent limitations of ContentEditable, the standard feature in web browsers. The following is a detailed exploration of its functionality. ⚡ Core Principles: Well-Defined Rules for a reliable WYSIWYG experience: 1. DOM-to-Content Mapping: Consistency between the DOM and visible content. 2. Selection Behavior: Accurate mapping of selections. 3. Closed Edits: Edits align with normal typing, preventing issues with pasting/editing. 💡 Architecture: 1. Document Model: Comprises paragraphs and sections, each with text, formatting, metadata, and layout info. 2. Mapping Mechanisms: - Indoor Mappings: Ensure alignment between the DOM and internal model. - Outdoor Mappings: Handle pasted content that may not map cleanly. 3. Edit Operations: Six main operations—insert, update, or remove paragraphs/sections—directly modify the internal model. 🔥 User Interaction & Performance: 1. Capturing Edits: User actions translate into core edit operations, simplifying editing commands. 2. Efficient Rendering: Minimal DOM updates based on the model ensure smooth performance. -- ➡️ Don’t let front-end interviews hold you back. Prep with ex-Big Tech experts, trusted by 500,000+ engineers > https://lnkd.in/g3PR6h4A -- #medium #website #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience

Always try your best in interviews. Even if you messed up earlier rounds or don't have the confidence that you'll pass, give it your best shot and take it as a learning experience. Why? Sometimes you're a borderline case and when new role opens up, your first in line. Some members of the GreatFrontEnd community who previously did not get the Meta offer recently received this email from Meta recruitment that they are being considered for other roles and they **do not have to re-interview**. Super stoked for them! Past performance can affect future results. As Steve Jobs famously put it – "You can't connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future." #meta #softwareengineer #frontend #techinterview

When your <div> gets too narrow.. 😅 #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience

GitHub and open source is a godsend for software engineers. There are few other industries where you can find quality work from the best in the industry, entirely free and available for you to access and learn from. Unfortunately, not many people leverage these amazing free resources. But if you do, we at GreatFrontEnd painstakingly curated 40 of the best open source React and Next.js projects which can help you level up as a developer: React open source projects: - CodeSandbox: https://lnkd.in/gCdWA8W6 - AST Explorer: https://lnkd.in/gp4zyXQE - Excalidraw: https://lnkd.in/gaS76S3K - Sentry: https://lnkd.in/g8CprT9Z - Mattermost: https://lnkd.in/gjuPEXUJ - Webamp: https://lnkd.in/gWmPnMQt - Jira Clone: https://lnkd.in/g-VNBddg - Conduit: https://lnkd.in/gQri5qUn - Real World App by Cypress: https://lnkd.in/gFCGwsXp - Simorgh by BBC: https://lnkd.in/gvxMQeRj - Spectrum: https://lnkd.in/gwZc8ASU - Grafana: https://lnkd.in/gRKr3-F4 - GoAlert by Target: https://lnkd.in/gv-WJ3Fk - Calypso by Automattic: https://lnkd.in/g6eUF_3Z - TakeNote: https://lnkd.in/d7UshgyW - Bulletproof React: https://lnkd.in/gKHmhTM - Bluesky Social: https://lnkd.in/dfbwsbnw - Novu: https://lnkd.in/eDYeAdUb - DevHub: https://lnkd.in/dzhw_UrC - Highstorm: https://lnkd.in/dbgUAhkY - Unkey: https://lnkd.in/efZ7JdAy - Rallly: https://lnkd.in/g_PXgVDe - Readme.so: https://lnkd.in/d38H-UKM - Athena Crisis: https://lnkd.in/dJyaMmyA Next.js open source projects: - Supabase: https://lnkd.in/gSGJYqhz - Cal.com: https://lnkd.in/gf2ceazr - Dub.co: https://lnkd.in/gyGuZTNh - Twenty: https://lnkd.in/gYwh2-xs - Inbox Zero: https://lnkd.in/g2xB9GWn - Rallly: https://lnkd.in/g6ZC-g6v - Formbricks: https://lnkd.in/gS8vEi7N - Plane: https://lnkd.in/gpMSyu7Y - Daily.dev: https://lnkd.in/gf-8X2eV - Infisical: https://lnkd.in/exdsyShW - Papermark: https://lnkd.in/eaCZJwnp - OpenResume: https://lnkd.in/gcRBg3TG - Drift: https://lnkd.in/gCYatg-9 - LobeChat: https://lnkd.in/epdzDDMz - shadcn/ui: https://lnkd.in/g2tTq2VK - Quill: https://lnkd.in/grjKQW98 - Next.js Commerce: https://lnkd.in/ehPJ-u4c - Documenso: https://lnkd.in/dJitahVA - Unkey: https://lnkd.in/efZ7JdAy Follow GreatFrontEnd for more interesting front end content! #nextjs #javascript #react #supabase #excalidraw #frontend

Build blazingly fast content-driven websites with Astro 🚀 In recent years, web development has increasingly demanded more JavaScript and advanced features, leading to greater complexity. Astro emerges as a solution, offering ultra-fast performance and a great developer experience. This modern framework is designed to streamline the development process while maintaining efficiency, making it an attractive choice for developers looking to build high-performance web applications. 💡Astro is a modern, open-source web framework designed to build fast, content-driven websites. ⚡ Core Features - Content-Driven Design: Perfect for blogs, marketing sites, docs, and e-commerce, delivering content quickly and effectively. - Server-First Architecture: Prioritizes server-side rendering (SSR) for faster load times. - Zero JavaScript by Default: Generates static HTML for improved load speeds and SEO. - Islands Architecture: Self-contained components load JavaScript only where needed, boosting performance. - Framework Agnostic: Works with React, Vue, Svelte, Solid, and more. 🥇 Benefits - Enhanced Performance: Combines static site generation (SSG) and SSR for rapid load times and better user experiences. - Simple Development: Easy setup, allowing developers to focus on building features. - Scalable: Designed to grow with your projects, supporting reusable UI components. - Improved SEO: Static HTML boosts search engine visibility, ideal for content-focused projects. -------- Ready to level up your front-end skills and crush interviews? Join 500,000+ engineers preparing with ex-FAANG resources HERE ➡️ ➡️  https://lnkd.in/g8XKz9Wi Get access to expert prep, real-world practice, and all the tools you need to succeed! -------- #astro #frontendjob #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javascript #react #greatfrontend -------- Ready to level up your front-end skills and crush interviews? Join 500,000+ engineers preparing with ex-FAANG resources HERE ➡️ ➡️  https://lnkd.in/g8XKz9Wi Get access to expert prep, real-world practice, and all the tools you need to succeed! -------- #astro #frontendjob #frontend #frontenddevelopment #webdeveloper #frontenddeveloper #softwareengineer #softwareengineering #developer #computerscience #javascript #react #greatfrontend