frontend-case-studies
💼 A curated list of talks and articles about real world frontend development
https://github.com/andrew--r/frontend-case-studies
Last synced: 25 days ago
JSON representation
English
[18F](https://18f.gsa.gov/)
[1Password](https://1password.com/)
- From dark to light and back again
- How we used esbuild to reduce our browser extension build times by 90%
[Airbnb](https://www.airbnb.com)
- Turbocharged JavaScript Refactoring with Codemods
- Rearchitecting Airbnb’s Frontend
- Migrating from Mocha to Jest
- React Performance Fixes on Airbnb Listing Pages
- Server Rendering, Code Splitting, and Lazy Loading with React Router v4
- React Native at Airbnb - engineering/react-native-at-airbnb-the-technology-dafd0b43838), Building a Cross-Platform Mobile Team, Sunsetting React Native, What’s Next for Mobile at Airbnb
- Operationalizing Node.js for Server Side Rendering
- How Airbnb is Moving 10x Faster at Scale with GraphQL and Apollo
- ts-migrate: A Tool for Migrating to TypeScript at Scale
- Building a Faster Web Experience with the postTask Scheduler
- A Deep Dive into Airbnb’s Server-Driven UI System
- Measuring Web Performance at Airbnb
- Faster JavaScript Builds with Metro
- Airbnb’s Trip to Linaria
- Improving Performance with HTTP Streaming
- Rethinking Text Resizing on Web
- How Airbnb Smoothly Upgrades React
- Adopting Bazel for Web at Scale
- Building (And Re-Building) the Airbnb Design System
[ALDO](https://www.aldogroup.com)
[Allegro](https://allegro.pl)
- Managing Frontend in the Microservices Architecture
- Why Allegro Ads chose TypeScript
- Page visibility and performance metrics
- Performance of JavaScript optional chaining
- Using ESLint to improve your app’s performance
- Measuring Web Performance
- Making API calls a seamless user experience
- CSS Architecture and Performance in Micro Frontends
- How to turn on TypeScript strict mode in specific files
- Evolution of web performance culture
- How we refactored the search form UI component
[Amazon](https://www.amazon.com)
- How we halved the publish size of modular AWS SDK for JavaScript clients
- How Prime Video updates its app for more than 8,000 device types: the switch to WebAssembly increases stability, speed
[Atlassian](https://www.atlassian.com/)
- Trellisheets: How we spin up CSS for Trello sites with ease
- Scaling React server-side rendering in Jira Cloud
- A look at Trello: adopting GraphQL and Apollo in a legacy application
[Badoo](https://badoo.com)
- How to manage your Design Tokens with Style Dictionary
- How to teach a web app to speak 100 languages: the specifics of localisation
- The painless way to collect statistics from a web-site
- Translating interfaces into almost fifty languages: Sketch
- part 1 - hot-localisations-update-12272511df0c) (November 2017)
- part 1 - zero-to-cosmos-part-2-97929e13f839), part 3 (February 2018)
- Translating Dust templates to JSX
- why is it not the same as it is for designers - alignment-for-frontend-developers-part-ii-how-can-the-process-be-automated-e41d8de2b18f) (November 22, 2018)
- from the idea to the assets Sketch files - multi-brand-multi-platform-icons-with-sketch-and-a-node-js-script-part2-8d02e8bb915a) (December 2018)
- Covering A/B tests with UI tests: how to avoid getting tangled up in your own code
- Design Tokens beyond colors, typography, and spacing
[BBC](http://www.bbc.com)
- Redefining the BBC News core experience
- How BBC Interactive Content Works Across AMP, Apps, And The Web
- HTTP/2 is easy, just turn it on…
[Bitmovin](https://bitmovin.com)
- How Bitmovin Used React/Redux to Develop Its New Dashboard
- To Play, or Not to Play – New AutoPlay Policies for Safari 11 and Chrome 64
- To Play, or Not to Play #2 – Firefox blocks audible autoplay by default!
[blogfoster](http://www.blogfoster.com/)
- Jumpstart to React+Redux Development
- Centralized ESLint Configuration
- Redux For Better in-App Analytics
- Managing Complexity in Redux: Higher-Order Reducers and Async State
- How We Simplified our Tooling Setup for Node.js Projects
- How to Use the Power of Jest’s Snapshot Testing Without Using Jest
[Bloomberg](https://www.bloomberg.com/)
- How Bloomberg Used React Native to Develop its new Consumer App
- wsk: A Straightforward and Maintainable Build System from the Bloomberg Graphics Team
- 10 Insights from Adopting TypeScript at Scale
[BuzzFeed](https://www.buzzfeed.com)
- Micro Frontends at BuzzFeed
- Accessible BuzzFeed
- CLS at BuzzFeed — Part 1: Raising The Floor
- CLS at BuzzFeed — Part 2: Getting Help From Real Users
- CLS at BuzzFeed — Part 3: Dealing with the unpredictable
[Campaign Monitor](https://www.campaignmonitor.com/)
- Fixing bugs with Outlook specific CSS
- Better video previews for email
- How to test accessibility of emails
[Carousell](https://carousell.com)
- How we made Carousell’s mobile web experience 3x faster
- part 1 - insider/building-a-dynamic-ui-system-at-carousell-part-2-d46bba8facaa) and part 3
- An Experiment with JSON Schema
[Checkbot](https://www.checkbot.io/)
[Cloudflare](https://www.cloudflare.com/)
- Dark Mode for the Cloudflare Dashboard
- How we built Origin CA: Web Crypto
- Open Sourcing CloudFlare’s UI Framework
- Going Global - a Localization Case Study at Cloudflare
- How we made our page-load optimisations even faster
- Real URLs for AMP Cached Content Using Cloudflare Workers
- Fast Google Fonts with Cloudflare Workers
- Migrating to React land: Gatsby
- Moving from reCAPTCHA to hCaptcha
[Cloud Four](https://cloudfour.com/)
[CodeSandbox](https://codesandbox.io/)
[Conductor](https://www.conductor.com/)
[Datadog](https://www.datadoghq.com)
- Redux-Doghouse – Creating Reusable React-Redux Components Through Scoping
- How Datadog uses Datadog to gain visibility into the Datadog user experience
- DRUIDS, the Design System that Powers Datadog
- Making Fetch Happen - Building a General-purpose Query & Render Scheduler
- How We Migrated Our Acceptance Tests to Use Synthetic Monitoring
[DAZN](https://dazn.com/)
- Testing MobX State Tree
- Handling complexity in lambda functions
- Micro-frontends, the future of Frontend architectures
- Adopting a Micro-frontends architecture
- Orchestrating micro-frontends
- Jest: Our journey into performant unit tests
- Identifying micro-frontends in our applications
[DEV](https://dev.to)
[DoorDash](https://www.doordash.com)
- Things to Keep in Mind When Integrating a Map Feature to a Web App
- Building the Caviar Web Experience Using Reusable React Components on the DoorDash Platform
- Implementing Theming in DoorDash’s Design Language System
- Serving Multiple Websites and Business Logic From a Single Platform
- Managing React State on DoorDash’s Item Modal Using the Class Pattern
- Building a Marketing Engineering Platform using Next.js, Cloudflare, and Contentful
- Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS
- Building a Common Web Library for Fast Implementations of Risk Frictions
- DoorDash’s Lessons on Improving Performance on High-Traffic Web Pages
[Dropbox](https://www.dropbox.com)
- The Great CoffeeScript to Typescript Migration of 2017
- JQuery to React: How we rewrote the HelloSign Editor
[EdgeDB](https://www.edgedb.com)
[Electronic Arts](https://www.ea.com)
[Ele.me](https://www.ele.me)
[Etsy](https://www.etsy.com)
- Localizing Logically for a Global Marketplace
- Multilingual User Generated Content and SEO
- Measuring Front-end Performance With Real Users
- Responsive emails that really work
- Transitioning to SCSS at Scale
- Rebuilding the Foundation of Etsy’s Seller Tools
- How Etsy Formats Currency
- SEO Title Tag Optimization at Etsy: Experimental Design and Causal Inference
- Optimizing Meta Descriptions, H1s and Title Tags: Lessons from Multivariate SEO Testing at Etsy
- Reducing Image File Size at Etsy
- How Etsy Localizes Addresses
- Developing in a Monorepo While Still Using Webpack
- The journey to fast production asset builds with Webpack
- Etsy’s Journey to TypeScript
[Evil Martians](https://evilmartians.com/)
[Expedia Group](https://www.expediagroup.com)
- Scoping A/B Test Code in React
- Profiling React Server-Side Rendering to Free the Node.js Event Loop
- Creating Your Own Apollo Cache for Perf and Profit
- Optimizing a Page: Resource Hints, Critical CSS, and Webpack
- Contextual and Consistent Analytic Events in React
- Minimizing DOM Nodes for Performance
- Web Performance vs. User Engagement
- Migrating to WKWebView
- A (Small) Case for Function-Based React Components
- Measuring Interaction Performance with FPS Data
- File Upload with GraphQL, Apollo Server, Hapi 18+, and React
- Web Applications: Analyzing Client-Side Performance
- Schema Driven UIs
- Responsive Accessibility Guidelines at Expedia.com
- 12 Tips to Improve Client Side Page Performance
- Using Webpack Module Federation to Create an App Shell
- CSS-in-JS: An Investigation
- Multi-Variate Web Optimisation Using Linear Contextual Bandits
- How Expedia.com Uses Accessibility Automation
- Sizing Android WebView iframes with JavaScript
[ezCater](https://www.ezcater.com/)
[Facebook](https://facebook.com)
- Facebook has 30,000 react components. How do you manage large project directories with many components?
- Design Systems & Tools at Facebook
[FARFETCH](https://www.farfetch.com)
- One less second for the page, one giant leap for the business
- GraphQL sessions: powering farfetch.com
- The need for speed — 2: call for metrics
- How to build a performance culture at scale
[fastq.bio](http://www.fastq.bio/)
[Figma](https://www.figma.com)
- Building a professional design tool on the web
- Debugging Data Corruption with Emscripten
- Introducing BrowserView for Electron
- Introducing: Figma to React
- Figma, faster 🏎
- How to build a plugin system on the web and also sleep well at night
- React at 60fps: improving scrolling comments in Figma
- Inside Figma: a case study on strict null checks
- The evolution of Figma’s mobile engine: Compiling away our custom programming language
- Illuminating dark mode
- WebAssembly cut Figma’s load time by 3x
[Financial Times](https://www.ft.com)
- A faster FT.com
- YES, your site too can (and should) be accessible
- Improving the cache performance of The Polyfill Service
- Can't You Just Make It More like Bootstrap?
- Speeding up without slowing down
- What happens when you visit ft.com?
- Tips for in-house teams in a free market software culture
- An outbreak of Accessibility anti-patterns
- This one line of Javascript made FT.com 10 times slower
- Improving the cache performance of The Polyfill Service even more
- Designing a sustainable front-end toolset for FT.com
- Animating list reordering with React Hooks
- Building The New Financial Times Web App
- Free-market software development
- SVG icons are easy but the fallbacks aren't
- Taming Webpackʼs content hashes
[Flickr](https://www.flickr.com/)
- Lessons Learned from the Flickr Touch Lightbox
- Creating an interface for geofences
- Raising the bar on web uploads
- Building an HTML5 Photo Editor
- Building The Flickr Web Uploadr: The Grid
- Parsing Exif client-side using JavaScript
- Adventures in Jank Busting: Parallax, performance, and the new Flickr Home Page
- Building Flickr’s new Hybrid Signed-Out Homepage
- Perceptual Image Compression at Flickr
- Introducing yakbak: Record and playback HTTP interactions in NodeJS