Visualize React State And Component Hierarchy In React Apps With Realize
Some of us at Digital Primates were on React Wednesday and helped interview the team behind Realize – a set of open source browser extensions that visualize React component hierarchy and state. The team met during a startup accelerator and collaborated remotely on the project.
The interview ranged from how the extensions help React development practices, to what building a browser extension entails. The team behind this are great folks and were a lot of fun to interview. You can read highlights or watch a replay of the broadcast on YouTube.
Simply React – Kent C. Dodds (Byteconf React 2020 Keynote)
Kent C. Dodds gave the opening keynote at Byteconf 2020 a free virtual conference. Kent has a talent for being engaging and clear when discussing technical matters. If you missed Byteconf 2020, you can catch the replay of Kent’s keynote on YouTube.
The most interesting part of the keynote for me was his explanation of how the requirements for a component morphs and changes and what you can do about it at design-time. Software is always changing and adapting. We can avoid a lot of trouble by accounting for this early in the software development process. The use of Inversion of Control principles in Kent’s example are useful to tame wild components.
egghead Talks: 2 sessions on React Native
The Egghead talks series continues with a session about React Native. On Jul 9, 2020 09:00 AM Talia Nassi will present a session on Setting Up Feature Flags with React. You’ll learn what feature flags are, why you should be using them, and how to put them into your React Native based mobile application.
After that, Adhithi Ravichandran will have a session on Lessons Learned From Building React Native Apps where she shares her experiences on best practices in building components, styling, third party library integrations, internationalization, performance considerations, deployment, and more.
FITC Spotlight UX Online Event – July 9th
FITC is putting on a user experience event with speakers from Google, Adobe, Asana, and others. This is a half-day, paid event that helps user experience and interface designers learn more about the science and practice of effective UX Design.
I am most excited about two talks, The Design Leader’s Secret Guide to Measuring UX and The ROI of UX: You’re Over-Thinking It. A well-designed user experience is important to keep users engaged, spending, and using an app. It can be hard to communicate and report on user experience progress. I hope to gain new ideas and insights from these talks and be able to more effectively communicate user experience metrics upward.
Convert JSON into gorgeous, typesafe code in any language.
Death to boilerplate! Quicktype is a tool that takes in data and spits out real code in a variety of languages. While other tools promise to help in a similar manner, Quicktype seems to be ahead of the pack both due to the amount of supported languages, and the intelligence of how it works.
Using Quicktype means you can build the code necessary to integrate with APIs much faster. Further, generated code avoids many of the accidental human errors that can occur when typing out code manually. Typos, inconsistencies, overlooked sections, and other problems can be avoided because the tool handles the job in a repeatable fashion.
XState – JavaScript and TypeScript finite state machines and statecharts for the modern web
XState is useful for modeling well-defined, finite state for JavaScript applications. State can be UI, Business rules, or a combination. With XState, you can model the relationships between states, and the actions to take within states. It’s also fully serializable, which means it can be stored in databases, shared between client & server, and so on. XState specifically conforms to a well-established, “well-trodden,” and “battle tested” state specification (SCXML). There are clear examples on the site with React – using local component state, Hooks, or Class components. If you have a need to outline application state in a way that ensures only valid states are possible, then XState is a helpful tool to get you there.
The App Sandbox
The folks at Slack are being proactive on security by closing off attack vectors. The latest release of Slack contains a feature enabling the App Sandbox for all web content. This feature is part of the chromium subsystem, which Slack uses as a dependency of Electron.
If you build Slack applications, you need to know what this sandbox does, and what it prevents, in case you need to update your code. The Slack team went through a very detailed process to trim down their code, after all, how can code be insecure if it doesn’t EXIST?!
Then, the team added in a context isolation capability to limit side effects. Now, you can use contextBridge to move back and forth between contexts. The article explains in greater detail with nice diagrams how the changes work and what you need to know.
