#139 CSS in the Age of React: How We Traded the Cascade for Consistency
sponsor
Detect, Diagnose and Defeat React Errors 🏆
Digging thru logs to debug issues? Such a waste of time. Rollbar detects when code breaks in real-time and provides the full stack trace and diagnostic data to help you defeat impactful errors. Debug with data and instantly know what's broken and why. Try Rollbar for free!
this week's favorite
CSS in the Age of React: How We Traded the Cascade for Consistency
With hundreds of engineers, developers and designers working on Yelp, ensuring visual consistency across Yelp is a challenging task. We’ve been migrating our web components from Yelp Cheetah to React to increase designer and developer productivity while ensuring visual consistency across our web app. Along the way, we built Lemon Reset - a package containing consistent, cross-browser React DOM tags, powered by CSS Modules.
How to Architect complex UI components in React
React is only the ‘V’ part of MVC and as such is not opinionated in how you architect your UI. If proper attention is not given, a reasonably large react app can quickly succumb to a mess of stateful components, each with a mind of it’s own, quickly violating the react way of doing things.
“What?!”, you say. “GraphQL is a server side query language. Redux is a client-side state management library. How could one replace the other?” Good question. Hold onto your butts, because I’m about to answer it.
Analyzing the Bundle Size & Code splitting in Create React App
Create React App(CRA) by default bundle out entire app into single main.*.js file with Webpack. As our app grows, bundle grows. Bundling is the process of following imported files and merging them into a single file: a “bundle”.
Webpack 4 Tutorial With Example From Scratch
Webpack 4 Tutorial With Example From Scratch is today’s topic. At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into one or more bundles.
newsletters
Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.