The React Show: Recent Episodes
Owl Creek Studios
Many people are using serverless these days, often without even really thinking about it because they are the default mode of operation for many popular services like NextJS with Vercel. But what is it? Should you use it? Join Richard and I as we discuss serverless, how it works, and how we consider using it.
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
Join me in learning more about a revolutionary new dev tool for React apps! Unlike visual designers of the past, MightyMeld understands your code at a much deeper level and allows for modifying running and interactive React applications!
Get early access to MightyMeld with code REACTSHOW at https://www.mightymeld.com/
https://www.mightymeld.com/
thereactshow.com/support
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Consulting: https://thomashintz.org
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
What would it take to grow my freelance business? How do I find actually good clients and stand out? Tim Noetzel is the creator of FreelanceGPS.com and gives me coaching on how to get better at freelancing including: positioning, marketing, and where to find great clients.
https://freelancegps.com/
https://twitter.com/timnoetzel
thereactshow.com/support
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Consulting: https://thomashintz.org
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
Savas launched Stormkit around 5 years ago as a solo-founder. We discuss what it's like to build and a launch a SaaS product and keep it running and growing for so many years. We also talk about a previous food delivery startup Savas started in Instanbul. Armed with the experience Savas talks about everything from motivation to finding a cofounder to building what people want.
https://www.stormkit.io/
https://github.com/stormkit-io/monorepo-template-react
https://twitter.com/stormkitio
thereactshow.com/support
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Consulting: https://thomashintz.org
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
What is it like to use the Dvorak keyboard layout? Is it better for programming than the standard Qwerty layout? Join Evan and Thomas as they discuss keyboard layouts along with potential advantages of different keyboard types when it comes to dealing with RSI. The discussion then turns to editors and how they relate to each other including Emacs, Neovim, and VSCode. And then finishing with a discussion on Rust/programming safety and a brief overview of design-by-contract and literate programming.
https://twitter.com/_evanwalter_
thereactshow.com/support
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Consulting: https://thomashintz.org
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
How does Segun create so many successful and popular open source libraries? Segun, creator of Chakra UI, Panda, Zag, and Ark joins me to discuss how he creates software! We also discuss what makes Panda and Zag unique and what Segun thinks the future holds for component libraries as well as learning more about his latest projects: Panda and Zag.
https://twitter.com/thesegunadebayo
Chakra UI: https://chakra-ui.com/
Panda: https://panda-css.com/
Zag: https://zagjs.com/
thereactshow.com/support
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Consulting: https://thomashintz.org
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
In this episode, delve into the world of web application security and discover practical insights to safeguard your code. Join Thomas as they discuss common threats like SQL injection, cross-site scripting, and request forgery, emphasizing the importance of using secure libraries and following best practices. Explore topics such as data validation, authentication, and authorization, along with the significance of log security and intrusion detection. Gain valuable tips for writing secure code and understand the risks associated with implementing your own cryptography.
thereactshow.com/support
Join The Reactors! thereactshow.com/the-reactors-community
Join our Discord! https://discord.gg/zXYggKUBC2
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Part 1: Introduction to Web Application Security In this segment, the host discusses the importance of web application security and the potential risks associated with vulnerabilities. The focus is on common threats such as SQL injection, cross-site scripting, and request forgery. The host emphasizes the need for understanding and addressing these threats, even when using frameworks like React that offer built-in security measures.
Part 2: Log Security and Authentication/Authorization The host highlights the significance of log security and cautions against logging sensitive user information that could be exploited. They stress the importance of implementing secure authentication and authorization systems and share insights on common mistakes made in login system implementation. Keeping the login process simple and separate from other code is strongly recommended to minimize vulnerabilities.
Part 3: Data Validation and Libraries/External Services Data validation is discussed, with an emphasis on distinguishing between data sanitization and data validation. The host advises against relying on client-side validation and stresses the importance of validating and sanitizing data on the server-side. They also provide insights on assessing the security of libraries and external services, recommending thorough documentation on secure implementation, policies for handling vulnerabilities, and a high-level security approach.
Part 4: Writing Secure Code and Final Tips The host shares their approach to writing secure code, emphasizing the need for systemic solutions, explicit labeling of untrusted data, and assuming worst-case scenarios to design robust security mechanisms. They caution against overcomplicating security measures and advocate for using well-tested libraries for cryptographic functions. The importance of backups, intrusion detection, and minimizing stored data is also highlighted.
Support the show
Can you even write good code in the workplace? It might often feel difficult and we have a chat about that and also some ideas on how to do it anyways.
thereactshow.com
Join our Discord! https://discord.gg/BneUtTSB
My book: Foundations of High-Performance React https://www.thereactshow.com/book
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
In this episode we dive deep into what the JavaScript engine actually does when you define and call a function; including for React components defined as functions! We learn a lot of fun nuggets along the way like how function invocation relates to lexical scoping and closures!
thereactshow.com
Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
- https://mimetype.app/
- The Mom Test: https://www.amazon.com/The-Mom-Test-Rob-Fitzpatrick-audiobook/dp/B07RJZKZ7F
- meier.sh
- My Book - Foundations of High Performance React
- thereactshow.com
- https://twitter.com/TheReactShow
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
The Investor Friendly Real Estate Agent
Welcome to the Investor Friendly Real Estate Agent Podcast where we look at real...
Listen on: Apple Podcasts Spotify
The Sales Warrior Within
Discover and Empower The Sales Warrior Within You
Listen on: Apple Podcasts Spotify
Support the show
Programming is just a tool. One that I absolutely love to use but nonetheless it is a tool and AI may start to replace it. What can you do to keep your job as a software developer while AI replaces some programming tasks?
- IWW https://www.iww.org/
- Sampson Boat Co https://www.youtube.com/channel/UCg-_lYeV8hBnDSay7nmphUA
- My Book - Foundations of High Performance React
- thereactshow.com
- https://twitter.com/TheReactShow
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
David C Barnett Small Business and Deal Making M&A SMB
I discuss buying, selling, financing and managing small and medium sized businesses...
Listen on: Apple Podcasts Spotify
Support the show
Let's learn about the new AIs and how to practically use them in your React projects! In this episode we learn the basics of how AIs like ChatGPT work and how to apply that knowledge to actually accelerating the development of React applications!
We also have a couple trivia questions and cover the latest React news!
- My Book - Foundations of High Performance React
- thereactshow.com
- https://twitter.com/TheReactShow
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
Sources
- ChatGPT explained by Arvin Ash: https://www.youtube.com/watch?v=WAiqNav2cRE
- How Does ChatGPT work by Till Mushof: https://www.youtube.com/watch?v=aQguO9IeQWE
- Prompt: https://www.skool.com/chatgpt/promptgenerator?p=1e5ede93
- React Labs Blog: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023
- NextJS 13.3 News: https://nextjs.org/blog/next-13-3
Prompt I use for generating source code prompts in ChatGPT:
I want you to become my Prompt Creator. Your goal is to help me craft the best possible prompt for my needs. The prompt will be used by you, ChatGPT. You will follow the following process: 1. Your first response will be to ask me what the prompt should be about. I will provide my answer, but we will need to improve it through continual iterations by going through the next steps. 2. Based on my input, you will generate 3 sections. a) Revised prompt (provide your rewritten prompt. it should be clear, concise, and easily understood by you), b) Suggestions (provide suggestions on what details to include in the prompt to improve it), and c) Questions (ask any relevant questions pertaining to what additional information is needed from me to improve the prompt including if there are any license limitations on libraries the generated source code utilizes). 3. We will continue this iterative process with me providing additional information to you and you updating the prompt in the Revised prompt section until it's complete. The prompt you generate should finish by stating that responses: should be only in the form of source code, should utilize any relevant open source libraries, and that the generated code should be as concise as possible, secure, easily testable, include comments only for complex parts of the code, and should follow industry standards for high-quality and maintainable code.
Energizing Tennessee
Energizing Tennessee, powered by the Tennessee Advanced Energy Business Council and...
Listen on: Apple Podcasts Spotify
Support the show
Is AI the technological progress that will free us to work on what we really want to work on? Will it free us to let us make a better twitter clone in React?
- My Book - Foundations of High Performance React
- thereactshow.com
- https://twitter.com/TheReactShow
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
Learn the fundamentals of React by working through its mechanics from how the browser loads React, to JSX, components, state, rendering, & reconciliation!
- My Book - Foundations of High Performance React
- thereactshow.com
- https://twitter.com/TheReactShow
- Norris Sea Slug Photo By https://www.inaturalist.org/users/passiflora4
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
Is History Watching? The Podcast!
This podcast will encompass "History for Everyone". It is history from the point of...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
react-admin is a popular SPA React project. We join founder François Zaninotto to discuss react-admin, profitable open source projects as well as software environmental sustainability, and engineering design.
- My Book - https://www.thereactshow.com/book
- https://www.thereactshow.com/
- react-admin: https://marmelab.com/react-admin/
- greenframe: https://greenframe.io/
- marmelab: https://marmelab.com/en/
- marmelab open-source projects: https://github.com/marmelab
- marmelab twitter: https://twitter.com/marmelab
- News about react-admin and other marmelab projects: https://marmelab.com/en/blog
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
Support the show
And when should you use React in general? Also, what if chatgpt were my boss, would I get a raise? And my thoughts on React component libraries, where they fall short, and if ZagJS or HTML5 Web Components might be the solution.
- My Book - Foundations of High Performance React
- thereactshow.com
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
All Business. No Boundaries.
Welcome to All Business. No Boundaries, a collection of supply chain stories by DHL...
Listen on: Apple Podcasts Spotify
What’s YOUR Best Price
Our goal is to educate & entertain while helping you to drive away with YOUR best price!
Listen on: Apple Podcasts Spotify
Support the show
What happens if you ignore, intentionally, or unintentionally break the "rules of React"? In this episode I set to find out! We break the rules of: keys, hooks, effects and more! The results surprised me.
- My Book - Foundations of High Performance React
- thereactshow.com
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
Climate Confident
With a new episode every Wed morning, the Climate Confident podcast is weekly podcast...
Listen on: Apple Podcasts Spotify
All Business. No Boundaries.
Welcome to All Business. No Boundaries, a collection of supply chain stories by DHL...
Listen on: Apple Podcasts Spotify
Let's Talk Shop
Coming to you from the Windy City, and hosted by Elias Khnaser! Welcome to Lets Talk...
Listen on: Apple Podcasts Spotify
Support the show
Programmers have better pay and working conditions than many other professions but that doesn't mean it's all sunshine and rainbows. From having to program exploitative, dangerous technologies to long hours, undisclosed security vulnerabilities, unreasonable timelines, and bad sleep it's time to talk about organizing ourselves.
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
- My Book - Foundations of High Performance React
- thereactshow.com
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
I recently watched the new React.js documentary and it made me realize I made a huge mistake! In this episode I talk about my big mistake, how React's development process is good design, how we need to market open source projects, and I also give a couple updates regarding react server components and my time bicycling over the mountains to San Diego.
- React JS documentary: https://youtu.be/8pDqJVdNa44
- Music by DRKST DWN: https://soundcloud.com/drkstdwn
- My Book - Foundations of High Performance React
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
In part 1 of this 2 part series we covered my struggles and diagnosis with depression and bipolar disorder while going through college and later working in the software industry. In this second part I talk more about the success I eventually found and how I make work "work" for me now.
- My Book - Foundations of High Performance React
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
This is part 1 of my story dealing with mental illness in the software industry and how it nearly cost me everything.
- My Book - Foundations of High Performance React
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Behind Every Successful Business Lies an Origin Story
Listen as founders of Black Bear Diner, Theory Coffee, and Fall River Brewing share theirs
Listen on: Apple Podcasts Spotify
Support the show
We join Jane once again as she tries to learn React on just 3 hours per week. In the last journey with Jane she struggled trying to get React to do what she thought it should do so this time it's back to the drawing board!
- My Book - Foundations of High Performance React
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
I dropped out of college to work on my first SaaS app. This is the story of how I did that, how it went, and some of what I learned!
Links
- Patreon
- My Book - Foundations of High Performance React
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
I spent a lot more time with React Server Components including porting a site to them and deploying! In this episode join me as I describe an in-depth experience with React Server Components and conclude with my real thoughts on where they are good but also where they fall short and what we might expect for the future of React!
Links
- Patreon
- My Book - Foundations of High Performance React
- thereactshow.com
- thereactshow.com source code
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
I think using TypeScript actually makes your program worse even when it is supposed to be making your programs better.
Links
- My Book - Foundations of High Performance React
- thereactshow.com
- AfterShow on Patreon
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Support the show
In my first programming job, the CEO of the company was so happy with my coworker and I they flew us in their private jet. This is the story of that job: how much money I made and what I learned!
Links
- Patreon
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Support the show
Evan Walter joins us to discuss a transition from a career in electrical engineering to React and web development. We also discuss Evan's experience starting out as a contractor and what that was like for someone with little experience in the field.
Links
- https://www.evanwalter.dev/
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Manufacturing Matters
The Manufacturing Matters podcast aims to get to the heart of automation technology and...
Listen on: Apple Podcasts Spotify
Support the show
React Sever Components are going to change so much of how we use and write React programs. In this episode we start to dive into Server Components and my journey using them to build an app.
Links
- Aftershow On Patreon
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Support the show
What's it like to learn React while also working a full-time job? In this episode we join Jane on her journey to learn React while also working full-time. We join her in the triumph of building her first React app but also many struggles and pitfalls along the way from outdated React documentation to not understanding that React is not always so easy to integrate with non-React libraries.
Links
- Patreon
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
- Well written and entertaining article on immutability
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Support the show
What is it like to port a React Native app to React for Web? In this episode we join Thomas on a journey to do just that. Along the way we discuss how testing and useEffect are possibly the worst parts about React and how you can use them in the best ways.
Show Notes
- Patreon
- My Book - Foundations of High Performance React
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Support the show
2022 was a big year for React! We round-up the major developments in this recap and take a look at the ground-breaking changes that are laying the foundation for the future of React: server components.
Show Notes
- Patreon
- My Book - Foundations of High Performance React - 30% of through Jan 1st - code: HOLIDAY30
- thereactshow.com
- TanStack Query v4: https://tanstack.com/query/v4
- TanStack Router: https://tanstack.com/router/v1
- NextJS 13: https://nextjs.org/blog/next-13
- Remix: https://remix.run/
- Shopify Hydrogen: https://hydrogen.shopify.dev/
- Gatsby 5: https://www.gatsbyjs.com/blog/gatsby-5/
- Cypress 10: https://www.browserstack.com/guide/cypress-10-features
- React 18: https://reactjs.org/blog/2022/03/29/react-v18.html
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Support the show
React news Roundup For December 2022: fun with ChatGPT, new SRW release, WASP React app builder DSL release, Multi-factor auth for CI, React Bricks visual CMS, and Flash in 2022!
Links
- Patreon
- My Book - Foundations of High Performance React
- thereactshow.com
- https://swr.vercel.app/blog/swr-v2
- https://wasp-lang.dev/blog/2022/11/29/wasp-beta
- https://github.com/step-security/wait-for-secrets
- https://vercel.com/blog/edge-config-ultra-low-latency-data-at-the-edge
- https://reactbricks.com
- https://foon.uk/how-flash-2022/
Support the show
Have you ever wondered how React works internally? Or what happens when React “renders”? I did and embarked on a journey to build my own version of React and dive deep into the source code of React itself to better understand exactly what happens “under the covers”. This is my story of that journey.
Links
- Patreon
- My Book - Foundations of High Performance React
- thereactshow.com
- Rodrigo Pombo’s “Build Your Own React”
- React Reconciler Docs
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Support the show
Is Typescript really that important? Should you use it? Do I use it? Also, I recently got back into Svelte and share my thoughts on the experience and how it compares to React.
Links
- Patreon
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
- Svelte
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Support the show
How do you “think in React”? If you can think in React you’ll be able to build React applications quicker, easier, and in a more robust manner. But where does one start? What is the best method for building React components and applications in a manner that fits well with the design of React?
Links
- Patreon
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
- Thinking in React
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Queens On A Roll
This podcast was created to educate & inspire people about the ably different...
Listen on: Apple Podcasts Spotify
Support the show
It's time to do a design analysis of cryptocurrencies and the technology they are built upon: blockchains. What are the design characteristics of cryptocurrencies and what problems are they good at solving? Are they good for currencies? How decentralized are they?
LInks
- Patreon
- My Book - Foundations of High Performance React
- Edited by: The Podcast Editor
- thereactshow.com
Dev Interrupted
What the smartest minds in engineering are thinking about, working on and investing in.
Listen on: Apple Podcasts Spotify
Intelligent Investing with Glenn Leest
This podcast covers all topics related to Investing with Glenn Leest
Listen on: Apple Podcasts Spotify
Support the show
Are you new to React or even new to programming in general but want to learn React? This is our concise-ish, opinionated guide to learning React. Between JavaScript, React, bundlers, JSX, code editors, npm or yarn, and more it can be extremely confusing when you first are trying to get started. The goal with this episode is to guide you through the path so you can learn React in the most efficient, pleasant, and fun way possible!
https://www.thereactshow.com/podcast/concise-ish-beginners-guide-to-learning-react
Links
- Twitter - The React Show
- Edited by: The Podcast Editor
- thereactshow.com
- Patreon
- Official React Site with Link to Docs
- Beta React Docs
- vscode - popular React code editor
- Nextjs
- NPM and NPM JS library searching
- eslint
- chakra-ui component library
- MUI - Material UI - component library
- cypress - testing
- cypress-react-selector - react plugin to make testing easier
- Book - Foundations of High-Performance React
If you or the previous programmer doesn't document what the code is intended to do it’s bad code and it won’t be maintainable in the long term. High quality, maintainable code must include high quality code comments. In this episode we look at why that is and how to do it. We also investigate if you can store React state outside of hooks or React classes.
Links
- Twitter - The React Show
- Edited by: The Podcast Editor
- thereactshow.com
- Patreon
- “Moving From React to htmx” a talk by David Guillot at DjangoCon 2022 conference
- Literate Programming
Are you more often correct than your boss? And what does that matter? Also, we have some fun experimenting with the performance of React compared to vanilla JavaScript and discuss why it does or does not matter.
Micro-frontends have been gaining in popularity over the last few years. What actually are micro-frontends? Will they make your application better? Should you use them? We’ll do an analysis in this episode and answer those questions.
- Twitter - The React Show
- Edited by: The Podcast Editor
- thereactshow.com
- Patreon
Show Links
- Micro-frontends with Micheal Geers
- Self Contained Systems
- Vertical Decomposition
- IKEA Case Study
- React Tutorial
- React Tutorial - Jennifer Fu
- Open Components
- American Express Microfrontends
- American Express Source Code
- Hopin Microfrontends
- Airbnb Infrastructure Evoltion
- Uber Infrastructure Evolution
- IKEA MicroFrontends
We're finally going to dive into Remix and see what it's all about and if you should give it a try!
- Twitter - The React Show
- Edited by: The Podcast Editor
- Remix
Are you the expert on your team and struggle to get things done with a constant barrage of questions lobbed at you? Or are you new and unsure what you should ask others and when? In this episode we try to solve those questions from both sides!
Links
- Twitter - The React Show
- Edited by: The Podcast Editor
What do you do when you built the wrong feature or product? When your boss or client is upset?
Links
- React Native EU Conference
- React Finland Conference
- React India Conference
- React Alicante Conference
- Twitter - The React Show
- Edited by: The Podcast Editor
- React Conf talk by Xuan Huang
- Joy UI
- TanStack Query 4
Nobody likes pages that jump around when loading or feel slow. How can we combat this in a measured fashion to create a smooth, enjoyable UX?
News
- ZagJS: an exciting new library from the creator's of ChakraUI that could enable your components to be component-library agnostic!
- Next.js 12.2: exciting new features in Next.js 12.2
Links
- Code Splitting
- ZagJS
- Next.js 12.2
- Next.js Layouts RFC
What do you do when your users accidentally or even purposefully abuse your service or app?
Links
- Twitter - The React Show
- Zag.js
- Next.js 12.2
- Edited by The Podcast Editor
- Music by prazkhanal
- News Music by Muzaproduction
Or at least my method to starting and following through!
Foundations of High Performance React
Dan Abramov has an updated Beta React Effects Guide. In this episode we go through and see what the designers of React think about effects and how to correctly use them in React 18 and we take a look at user reactions.
- Beta React Effects Guide
- Twitter React Show
The challenge: forms suck in React today, can we design a better way to work with forms in React?
Links
- Twitter Owl Creek
- Source Code From Episode
Twitter: @TheReactShow
What actually is routing in React? In this episode we look at what React routing is, and how it can be used not only for the traditional tasks but for a whole lot more.
Links
- Twitter - The React Show
- Twitter - Thomas Hintz
- YouTube
Resources
- React 18 Release Post
- React 18 Upgrade Guide
Show Notes
- Major New Features
- Concurrency!
- Mostly an implementation detail but powers many of the features.
- Interruptible renders! Better/smoother UI UX
- React can abandon and resume renders.
- Upcoming minor release will include Offscreen component for that allows restoring previous screens in the same state or even rendering a screen in the background.
- Breaking changes?
- Concurrent rendering is technically a breaking change
- Only enabled in parts of your app that use new features
- Benefits will take some time to realize, like waiting on library authors
- Suspense in Data Frameworks
- Server Components, still in development
- Automatic Batching
- Prioritized updates / AKA "transitions"
- Suspense On The Server
- Strict Mode developer features
- useTransition mark state updates as non-urgent
- useDeferredValue an upgrade over debouncing, an interruptible render that doesn't block user input
- useSyncExternalStore for libs, removes the needs to use useEffect when implementing subscriptions
- useInsertionEffect for libs, helps with CSS-in-JS lib performance issues
- How to upgrade:
- install React 18 via npm
- change ReactDOM.render to ReactDOM/client.createRoot (unmountComponentAtNode is also updated)
- callback is removed from render use useEffect or similar instead depending on use case
- If using SSR with hydration change hydrate to hydrateRoot
- State of React 18 & Reported issues:
- Should you upgrade? Or when should you upgrade?
Is it possible to build your React app right the first time? Or do you get annoyed with having to re-do things when it turns out we didn’t actually understand what users wanted? Or do you just want to make more money by creating happier users? On this episode we’ll work through methods to save time, effort, and actually build what the user wants.
Links
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
- YouTube
Resources
- Evolutionary Prototyping
Is React the final answer? Is it possible today to take React’s shortcomings to create something better than React?
Links
- Twitter Owl Creek
- Twitter Thomas Hintz
- YouTube
How does the JavaScript that powers your React app actually get run in the browser? How does React take advantage of the browser execution model? In this episode we talk about what actually happens when your JavaScript source code gets sent to a browser and it executes it going into detail about every step in the pipeline.
As new technology emerges in your technical stack, it’s important to not only learn them in theory, but to find practical ways to implement the knowledge you’re learning. You could either spend your time making another Todo List or Tic Tac Toe implementation, or dive into a rapidly expanding eCommerce market with the new Shopify Hydrogen Framework, built on upcoming React 18 Features like React Server Components.
Links
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
Show Notes
- Keeping Ahead of the Hiring Curve
- Practice makes Perfect
- Story Time on “Practice” React Applications we Made
- Transition: Making the Practical even more Practical
- Capitalizing on the eCommerce Industry
- https://acquireconvert.com/shopify-statistics/
- Shopify is Eating their Ecosystem
- https://twitter.com/theryanking/status/1497732269632598018
- Shopify Partners Program
- https://www.shopify.com/partners
- Shopify for Developers
- APIs + Graphql
- https://shopify.dev/api/admin-rest#top
- https://shopify.dev/api/admin-graphql#top
- App Bridge
- https://shopify.dev/apps/tools/app-bridge
- Polaris Component Library
- https://polaris.shopify.com/?shpxid=796e493c-6D49-4898-EB5D-81EF16546D4A
- Components included in Hydrogen
- Liquid
- https://shopify.dev/api/liquid
- https://shopify.dev/themes/tools/dawn
- Hydrogen
- https://shopify.dev/custom-storefronts/hydrogen
- APIs + Graphql
- What is Hydrogen
- Why Hydrogen?
- https://shopify.dev/custom-storefronts/hydrogen/getting-started
- Features of the Hydrogen Framework
- https://shopify.dev/custom-storefronts/hydrogen/framework
- React
- React Server Components
- https://shopify.dev/custom-storefronts/hydrogen/framework/react-server-components
- React Server Components
- Vite
- https://vitejs.dev/guide/why.html#why-not-bundle-with-esbuild
- SSR
- Tailwind
- https://tailwindcss.com/
- Talk about Chakra UI here too
- Hydrogen UI Components
- Why Hydrogen?
- Hosting with Oxygen
Have you ever gotten burned out? Or do you want to learn how to prevent it from happening in the first place? In this two part series, Brian Wetzel, former CTO of Softgiving, discusses his own experiences with burnout and what we can do on a personal level as well as a engineering and process level to mitigate the chances of burnout.
Links
- Contact Brian: brian@wtzl.software
- Part 1
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
Have you ever gotten burned out? Or do you want to learn how to prevent it from happening in the first place? In this two part series, Brian Wetzel, former CTO of Softgiving, discusses his own experiences with burnout and what we can do on a personal level as well as a engineering and process level to mitigate the chances of burnout.
Links
- Contact Brian: brian@wtzl.software
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
In any application, not just Javascript based ones, user input is one of the foundational pieces for user interaction with the application, the server, and with others across the web. In order to capture user input, you need forms. In this episode, we’ll explore the box form support provided by React with the basic HTML form elements like input, textarea and select, as well as libraries that have been developed to enhance form creation, as well as to perform validation.
Links
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
- YouTube
Resources
- https://reactjs.org/docs/forms.html
- https://reactjs.org/docs/uncontrolled-components.html
- https://react-hook-form.com/
- https://github.com/tannerlinsley/react-form
- https://formik.org/
Show Notes
- HTML + CSS as a basis for creating websites
- Javascript leads to enabling more user input and interactivity options
- Gathering user input without forms is possible, but forms make things simpler
- What are forms?
- Forms are the typical method we user input required to interact with an ecosystem
- Highly opinionated
- Many ways to do them
- Security, validation, accessibility etc.
- Lots to consider, what is the best way to do this in React?
- Working with What We Have in React and Javascript/HTML
- Controlled vs Uncontrolled
- Validation
- preventing server side hacking
- ensuring validity of data
- checking each field on submission
- regex
- Where vanilla react forms fail?
- large swathes of setStates or managing a large state object
- multiple types of validation, shared validation
- lots of vanilla code to cover existing and potentially future cases
- you end up just creating your own form framework, so why not use an existing one?
- Form Frameworks
- What are some options? Why do they exist?
- React Hook Forms
- Formik
- Recommended by React Team
- React Forms
- Part of the Tan Stack (React Query Family)
- React Hook Forms
- ControlledForm
- Controlled Components abstraction
- Restricted to using Form State for Component state??
- What are some options? Why do they exist?
- Validation Frameworks
- validator
- Yup for Validation
Upcoming in a React release is React Server Components. No, they aren’t just Server-Side Rendering. In fact, they are quite different and quite powerful in their own way. In this episode we learn about React Server Components and discuss how they could be used in applications of the future.
Links
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
- YouTube
Resources
- https://blog.plasmic.app/posts/how-react-server-components-work/
- https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html
- https://vercel.com/blog/everything-about-react-server-components
- https://www.patterns.dev/posts/react-server-components/
- https://blog.bitsrc.io/react-server-components-1ca621ac2519
Show Notes
- Overview
- Performance, Load Time, Etc Critical for success
- 53% of users abandon a website if it takes more than 3 seconds to load
- Users are not interested in using apps that have poor performance, don’t feel right
- So many ways to tackle the problem, what method to pick?
- Bundle Optimization with Webpack, etc.
- Performance Audits in App
- Server Side Rendering
- What are React Server Components?
- Before RSC, all components were rendered in the browser...
- With RSC, parts of the React Tree can be rendered by the browser, and other parts are rendered on the server.
- How is it different than Server Side Rendering?
- What are the main benefits of using React Server Components?
- How do React Server Components work?
- component.server.jsx, component.client.jsx , component.jsx
- Client Components cannot import Server Components, only regular or Server components can.
- Server Components can import Client components and Server components, and then within that, you can nest Server Components under Client Components.
- Lifecycle of a React Server Component
- Server receives request to render
- Server serializes root component element to JSON
- Browser reconstructs the React tree
- How can we get started implementing?
- Vanilla React Implementation
- react-server-dom-webpack
- Nextjs Experimental
- Shopify Hydrogen
- Vanilla React Implementation
In this episode we learn about the primary data structure underlying the React rendering process: React Fibers. With this knowledge we take a look at some of React’s design and how fibers impact development.
Links
- Episode Page
- Twitter Owl Creek
- Twitter Thomas Hintz
- YouTube
Resources
- https://github.com/acdlite/react-fiber-architecture
- https://blog.logrocket.com/deep-dive-into-react-fiber-internals/
- https://philippspiess.com/scheduling-in-react/
- https://programmingwithmosh.com/javascript/react-fiber/
- https://www.velotio.com/engineering-blog/react-fiber-algorithm
Show Notes
- What causes Jank? How do you get concurrency?
- Jank is when we need to update the UI but we can’t because we’re still processing some other work
- Breaking down “work” into small, discrete units of work
- How does React render?
- Phase one: reconciler phase
- Phase two: render to DOM/mobile/etc
- JavaScript execution model
- JavaScript is single thread, no real concurrency
- Event Queue
- Stack frame
- React Renders
- They can take a long time
- Updates could potentially be batched
- Some updates, like animations, keyboard events, should be prioritized
- Processing an API response is less priority
- What are fibers?
- A data-structure
- Breaking down reconciler phase in discrete units of work run in a loop
- Contain a priority level
- Contain state needed to pause and resume execution
- Fibers are used to allow React to create its own scheduler
- How does this help?
- React can control the execution model
- Prioritizing and batching updates
- Creating a “smooth” UX, less jank
- Things to watch for
- If setting state based on a previous value always use the callback
- Generally don’t need to watch for much, React has your back
- My opinion
- It’s a clever, very inefficient, workaround for lack of proper concurrency in JS execution model
- It means giving up control to React, good and bad...
Stop getting midnight calls because you broke the site on the last deploy: use Cypress for front-end testing! In this episode we talk about how we use the free, open-source testing framework Cypress to save time, catch bugs, and sleep better at night.
Links
- Episode Page
- Cypress
- Twitter Owl Creek
- Twitter Thomas Hintz
- YouTube
Show Notes
- What is integration testing?
- What are other types of testing?
- Unit
- Story Time, life without good tests
- Stories about poorly written tests
- Problem: new features get priority over testing
- Good tests with good coverage speeds up development!
- I always write tests before refactoring because you can go wild and know that all you have to do is get the tests to pass in the end
- Good tests give confidence: you can write new features/code a lot more quickly because you don’t have to think about breaking things, if somethings breaks you’ll know and you can fix it
- Infrastructure investment: it’s like investing in better roads and transportation networks, it has an upfront cost but you can move people and goods faster and more efficiently afterwards
- Solution: new features priority over testing
- Estimates include testing
- Don’t demo until you have tests if demoing puts on pressure to finish before you wrote tests
- What to test? / Testing priorities?
- Integration first (ensures things actually work for the end-user)
- Then unit
- What is Cypress used for?
- Integration Tests
- Unit Tests
- What makes Cypress best suitable for the task?
- Fast
- Consistent
- Screenshots, videos, logs
- Network request spies, spoofing
- CI Integration
- Dashboard
- What I don’t like about Cypress:
- Async API
- Maybe necessary for this because of JS?
- Async API
- Successfully Maintaining Tests?
- When to write tests?
- Cypress tips & tricks
- Custom commands
- Capturing values
- Example: capture a numeric value, do test, check that the new value is correct based on old one
Join Chris Keen, of Keen Concepts, in learning about being and becoming a React contractor and how to succeed long term.
Chris Keen has been a highly successful React consultant for over 7 years, a web contractor for nearly two decades, and is the founder of Keen Concepts. In this episode, we’ll learn from Chris how to become and stay a successful React contractor.
Episode Page
Links
- Keen Concepts
- Chris Keen LinkedIn
- Chris Keen Stackoverflow
- Chris Keen Github
A great way to improve the UX of most React applications is to include a query caching layer. In this episode we talk about why it can be be so important and some techniques to implement it well.
- Owl Creek
- React Query
- SWR (For Next.js)
Show Notes
- Issues
- Example, data hooks based on another data hook; “location” hook used everywhere
- Issues with vanilla data fetching hooks
- Every component/page refetches everything
- Everything re-renders
- Delays while waiting for parent hooks to return data
- Not triggering requests at the correct/ideal time
- Should be when the user clicks the button to open the new page, not when the new page component is loaded
- How to structure dependent data flows and refetches?
- Could also use global state
- Update endpoints that return new data/object
- Scroll recovery
- Paged endpoints
- refresh intervals
- ️️️Resolution
- Query caching/fetching logic lib
- SWR, React Query etc
- Tell lib what endpoint to hit and under which conditions, assigning that setup a key
- Lib stores result with a key
- Everything is done via that key, if the cache has a value for it it will return it
- Returns the same value every time the hook is used so it doesn’t cause a re-render, smoother app
- Stale-while Revalidate
- Loading state
- key/value store with fetching logic built in
- downsides
- some places where it isn’t needed, appropriate
- Complicated
- RQ has good dev tools, use them!
- Triggering requests at the correct/ideal time
- Generally use endpoint paths as keys
- scroll recovery
- paged endpoints
- dependencies
- refresh intervals
- hook for creating RQ endpoints
- Query caching/fetching logic lib
As React Developers, we’ve definitely got the front-end under control, but what about the back-end? One of the core components of a successful application is your Database. What is a Database? How do you choose the right one? Where do you host it? We’ll answer all your questions and share some experiences on Where and How to Store Data from your React Application
Show Notes
- Intro
- New Year’s Chat
- Data is fundamental to solving every programming problem
- First thing I do, whether it is writing an app or designing an algorithm or creating a library is look at the data
- What is the structure and how I will interact with it
- From Hard Coded Values to Your First Database
- Paralysis by Analysis due to lack of knowing options
- Starting with something that you don’t know well and it takes up all your time
- Making the wrong choice and sticking with it even though it causes more problems
- Making wrong assumptions on how you write your front-end, and it doesn’t sync up well with the way you are receiving data
- Making the Right Choice
- What is the structure of the data?
- Who is the data for?
- How is the data accessed?
- How to choose the right type of data storage?
- Types of Data Storage
- Relational Databases
- Great for CRUD
- Typically the best to start with
- Simple data models
- Need to know SQL
- Good enough to use for most things
- Key Value Stores
- Fast access + updates to self contained datasets?
- Document Stores
- Good for specialized cases
- Graph Database
- What is a graph?
- Network of Vertices and Edges
- Common Algos
- Shortest path between two verticies
- Allows relations via whole networks
- Find the path between two nodes
- What is a graph?
- Relational Databases
- Types of Data Storage
- Maintenance resources?
- Choosing libraries
- SQL Lite
- File Based Relational Storage
- option for when Code changes every few years
- Running your own Database Server
- Check if it’s running
- User Accounts
- App logins, connection maintenance
- option for when Code changes frequently?
- SQL Lite
- How often does the code-base change?
- Choosing libraries
- Where to Host Your Database
- Self Hosted
- Privacy
- More “maintenance” but not really if you do it right.
- Databases As a Service
- No Guaranteed Privacy
- Extra costs associated
- Heroku
- Sanity
- Self Hosted
- Wrap Up
- Starting with Something you know
- Migrate when you need
- What to look for when researching new option
- Starting with Something you know
A lot of us end up wasting a lot of time doing repetitive tasks. But we also worry that learning a new scripting language or keyboard shortcuts will be more work than it’s worth. In this episode we discuss a method you can use to find the right things to optimize.
We’re always working with components, but do we know when they mount or unmount or even what that actually means? Do we know how effects play into the lifecycle of a component? On this episode, we’re going to take a close look the lifecycle of a React component; what it is made up of and how it interacts with the rest of your program.
Links
- Episode Page
Show Notes
- Intro
- Overview
- Background
- Story about defining a component inside of a component (starts with tests/cypress)
- React has to check if the definition of a component has changed
- What actually is a component?
- Nothing more than a function with bookkeeping
- Lifecycle
- Mounting
- Default state/props
- Updating
- Runs function code but doesn’t use default state/props
- Updates the DOM when complete
- other than useLayoutEffects
- Post-Updating / Effects
- useLayoutEffect, synchronous, after DOM update but before paint
- Runs hook code sometime after component code completes running and DOM is updated, asynchronous
- Unmounting
- Hook cleanup
- Mounting
- lexical scope
- Story about defining a component inside of a component (starts with tests/cypress)
- Solutions
- Creating lifecycle methods with useEffect properly
- useLayoutEffect vs useEffect
- Dependency array
- useOnce (similar to onMount)
- Similar to onMount but different because uses useEffect vs useLayoutEffect
- useRef - ref.current will be undefined on first run
- set ref.current to true after running hook code
- onUnmount
- AFAIK there is no way to on unmount in a function component
- But you shouldn’t need to, if you use cleanup effects properly
- Updating State
- Prefer updating in event handlers vs useEffect
- Event handler is more synchronous/easier to reason about
- Prefer updating in event handlers vs useEffect
- Divisions between components/how to divide up your components/hooks
- Should this influence how we divide up our components?
- Generally no, abstractions should, not mechanics or performance
- Should this influence how we divide up our components?
- Creating lifecycle methods with useEffect properly
- Tangent: best practices
- Summary
You probably know that software licenses exist, but do you know what implications they can have on your business or project? Did you know not paying attention to them can be extremely costly? In this episode we’ll talk about software licensing, how it can affect your business or project, how you can navigate it, and which license to choose for your project.
Links
- Companion YouTube Video
- Podcast Page
Show Notes
- Intro
- Overview
- Consequences of using the wrong license
- What is software licensing?
- A legal contract between the party providing the software or source code and the end user
- Common types
- Free Software (gives the recipient extensive rights to modify and redistribute)
- Copyleft / Free-Libre / FOSS (protective)
- GPL, AGPL
- Right to freely distribute and modify but derivative works must carry the same rights
- Opinion: Software end-user focused, attempts to protect end-user rights
- Permissive (can relicense, allows proprietization)
- Some BSDs, MIT, Apache, MPL
- Minimal restrictions, can be used, modified, redistributed
- Opinion: Software creator focused, attempts to make life easier on creator
- Public Domain & Equivalent (grants all rights)
- Very complicated, often depends on country of origin and use
- Copyleft / Free-Libre / FOSS (protective)
- Proprietary (traditional copyright, no rights necessarily granted)
- Free Software (gives the recipient extensive rights to modify and redistribute)
- License Compatibility
- React projects: make sure to include OSS licenses in builds/distributions
- Can you copy/paste code you find on stackoverflow, documentation, the internet?
- Trademarks
- Don’t add or modify licenses
- Distribution
- Analyzing Licenses for Inclusion in a Project
- Picking a Software License for a Project
- Attribution
- Summary
Want to get a job as a React developer? What’s the best way to go about it? In this episode we discuss different paths to becoming a React developer and which one might be the best for you.
Links
- Companion YouTube Video: Easiest Way to get a Software Job
- Study: Does Stress Impact Technical Interview Performance?
Show Notes
- Overview
- Thomas Experience
- CS degree, joke in a different way
- ran the gauntlet
- Austin Experience
- State of Software Interviewing
- Well known to be very broken
- Does not accurately gauge ability to do job
- One study found interviewers are primarily judging level of anxiety
- Obviously data-structures & algorithms are irrelevant to nearly all programming jobs (especially React)
- Blame Google
- One time Yelp was asking me about bits and bytes for a JS job
- Requires studying for weeks on stuff you don’t need to know even if you’re senior level
- Interviewing environment, like whiteboard, way different than real life
- Some people are great at this
- Why does this happen?
- High-risk for hiring company
- Very conservative decision making
- Many candidates, trying to filter without investing in more personnel
- Getting paid to interview
- How to gauge someone’s ability to do the job?
- Best way: see them do the job
- Contracting/Consulting
- Lower-risk for hiring company
- Generally leads to employment offers
- Much better gauge of how well you can actually do the job
- Generally doesn’t involve so much ds&a
- Either way, best thing to do is build
- Summary
Hot takes on React, async programming, and other topics in this special episode of the React Show where we join the hosts, Austin & Thomas, on a QA session.
Episode page
Show Notes
- Intro
- Announcements: Discord
- Overview
- What is your favorite program you’ve ever worked on or built?
- What makes it your favorite?
- What is your dream program to build?
- Have you ever considered a different career than programming?
- Have you ever thought about it after starting programming as a career?
- What do you think of React?
- Why React and not something else?
- If you could change anything about React, what would it be?
- What is your favorite aspect of programming?
- What is the most difficult part of programming for you?
- What programming languages do you know?
- How do you feel about web forms within React?
- Are you more interested in building apps or programming?
- Or something else related to programming?
- Summary
Refactoring can be dangerous, to your program and to your health. In this episode we discuss techniques to enable safe and healthy refactoring methods.
Show Notes
- Story time
- (Thomas) I used to have delusions of grandeur about my refactoring ability
- Austin recent project
- Purpose: to make the code better
- The challenge, how to do it so that:
- You don’t break things unintentionally
- You don’t get mired in the details and unable to move forward
- It doesn’t take forever
- Method
- Code is the way it is for a reason
- Incremental
- Keep a working version
- Develop in parallel
- Contracts
- Don’t break contracts until you have a working replacement
- Contracts are:
- between input and output
- functions
- components
- interfaces
- libraries
- Bottom-up
- Don’t worry about code duplication until the end
- Avoid “second-system” effect
- Try to understand why the original system was created the way it was, don’t assume you know better, even if you do
- Story time
- I’m working on a large refactoring project involving the inventory system
- No down-time, must be 100% accurate
- I’m building it:
- In parallel with the existing system until it proves to be a worthy replacement
- Incremental, developing and deploying many smaller pieces along the way
- NOT as one large project that gets deployed all at once
Have you ever wondered why your app is slow sometimes? Or why a specific action takes so long to fully run? Or maybe why it takes so long for your initial render? The React Profiler is a great tool for diagnosing these issues. In this episode we take a look at profilers in general and then dive deep into the React profiler and how you can use it to diagnose performance issues.
Show Notes
- Intro 0:00
- Small Talk 1:20
- Announcements 4:20
- Overview 6:09
- What is a CPU profiler? 7:18
- Tracing vs Sampling 9:07
- How to enable the React Profiler 15:21
- Profiler dev tool 18:30
- Profiler Settings 34:05
- What can you do with the results? 37:26
- Summary 55:35
Hosting can get overwhelming fast, because it isn’t just hosting anymore. You want something that is simple, fast, scalable, and reliable but you also want to spend your time coding and not fiddling with build failures, right? In this episode we’re going to take a look at the factors involved in making hosting, devops, and CI/CD decisions and a method for developing the right solution for you.
Show Notes
- Overview 10:16
- Austin Experience: Hosting on Raspi
- Thomas Experience: Geocities, Linux, PaaS, AWS/GCP
- Factors: Team, Orchestration, etc 20:49
- Method: start simple, build incremental 25:40
- Recent Past Experiences: Heroku, Beanstalk, Vercel, more 36:05
- Self Hosting/Hosting PaaS 42:28
- Containerization 1:00:05
- Automation: GitHub/GitLab/etc 1:10:08
- Summary 1:23:08
Usually we are focused on adding new features, fixing bugs, and meeting deadlines, but what if the software we are building was also killing the planet? In this episode we’re going to take a look at the ecological impact of React applications, how to measure it, and how to reduce the impact on the planet that sustains us all.
Episodes now posted with show notes and links on https://www.owlcreek.studio/podcast
Show Notes:
- Performance related to ecological impact
- Discussion on why ecological impact is not a high priority 10:32
- React takes a ton more resources than a good vanilla JS app 14:49
- Optimize common tasks / main render path 22:02
- Different than normal performance optimization 22:16
- CPU wakes / sleep states 22:32
- Package size / network transmission / write less code 27:08
- Reduce the minimum hardware requirements 34:24
- Carbon Neutral / Negative 43:32
- Much, much, much better to just generate less pollution to begin with
- Forced upgrades 49:31
- Right to repair 50:21
- Long-running server tasks / Data processing / AI training 53:24
- Tools 1:08:30
- JS browser dev tools
- React Profiler
- powertop (linux only?)
- Simple watt meter
- Announcement: Podcast with notes on owlcreek.studio 1:14:25
Do you find React Router cumbersome or tedious to work with sometimes? Or are you just curious how routing could be done better? In this episode we take a look at how routing is done in NextJS. We discuss what it looks like and how to use it. And we also offer our opinions on the NextJS routing mechanism itself.
Show Notes
- Intro
- Overview
- What is routing? What are routes?
- routing is choosing which component to render for a given path and in nextjs, or API routes
- relevant multi-page apps
- Before Nextjs
- vanilla react
- react router
- how to create routes
- With Nextjs
- pages/routeName.js
- nesting
- Dynamic Routes
- blog
- using getServerSideProps to load slug [slug].js from sanity
- getServerSideProps Redirect example
- Opinions on: file based data-store / framework / NextJS
- Api Routes
- api folder
- dynamic routes
- auth0 library
- Summary
- Outro
It can be tempting to take the lazy approach to debugging and just start trying things, but I believe there is a much better way. In this episode we take a look at a method that works well for ensuring your debugging is productive, targeted, and successful.
How long will that take? It’s the classic question from the boss or the client. How do you answer? Do you get stressed from trying to get things done within your answer? Or do you end up cutting corners? In this episode we’re going to discuss a method that I use to make estimates that has worked quite well and is designed to work with stakeholders to help them understand estimates and the effects of changes on estimates.
In this episode Austin and I discuss various aspects of React program structure, like component size and files. We also take a look at learning this material in general and how you can learn the best methods yourself.
Do you ever feel like you’re not being heard? Or everyone on the team is just making the code worse? Does everything feel sloppy? Is there a lot of miscommunication? In this episode we’re going to look at why you might have answered yes to those questions and what a better way to organize your team might be.
How does React actually render your components? When is it going to invoke your component’s render code and when is it not? How intelligent is the fabled React tree diffing algorithm? We’re going to take an in-depth look at how React renders and talk about the internal algorithms and how that can and should influence the way you write React code.
Ever feel like you aren’t as good as the programmer next to you? Or just curious and want to know how you can get better? And not just a little better, but to become really good at programming? In this episode we discuss some techniques that will make that happen for you based on our research and experience.
The User Journey. A system used to define the interaction from acquisition to retention a user has with your web application. Our entire programming paradigm is built around discovering this journey, and then building an app around it. What if we instead built flows, extending further beyond our isolated use case amongst a fragmented collection of tools?
Hooks are all the rage in React these days but they actually have a pretty bad API design that leads to bugs and frustration. In this episode we will take a look at the design, discuss what makes it bad, why it is that way, what the React team can do about it, and finally, what we as users of React can do about it in the meantime. So tune in and learn how to make hooks work better for you!
Want to take your programs to the next level in quality and longevity? In this episode we learn about and discuss Domain Specific Languages and how you can use them in your React applications to write less code and higher quality applications that can be worked on by large teams without development slowing.
There are many React component toolkits you can choose from, but one of the best is Chakra UI. In the words of Chakra UI: if you want to create accessible react apps with speed, choose Chakra UI. Chakra UI is a simple, modular, accessible component library that gives you the building blocks you need to create your React Applications.
Ever gotten a huge mental block when programming and can't figure out how to move forward? Or maybe you planned everything out nicely but it turned in to a big mess? There is a better way to program that helps mitigate these issues: bottom-up programming. In this episode we talk about what bottom-up programming is, how to do it, and what it can do to make you a better and happier programmer.
This is the start of our series on building a new React App! But we’re not starting with just the technical nitty-gritty, we’re going to talk about the whole process of building a React based product, starting with branding. We have developed a process that helps us and our clients quickly understand, define, and develop a brand identity. In this episode we’re going to discuss the process where you too can get started with branding the right way.
As programmers, what is our role in preventing unethical software from being developed? In this episode we discuss why it’s so important for programmers, especially, to formulate an ethical framework. Then we talk about how the framework can be utilized to make decisions about new features or products.
What’s the best way to write a React app, or a program in general? Are you trying to get it perfect the first time, following all the best practices? How should you do a code review? Write a comment every time someone has some code duplication? In this episode we’ll discuss why standard industry answers to those questions will actually lead to worse programs and we’ll talk about the right mentality for writing code and doing code reviews.
Just getting started with React? Or maybe you have built React apps for years but want to learn a better way of creating React projects? Next.js is a React based framework designed to improve the developer and user experience. In this episode we discuss Next.js, how it compares to Create-React-App, and when you might benefit from using Next.js instead.
Yes, you are probably using useEffect wrong. useEffect is a powerful tool for hook based React components but it comes with many potential pitfalls and one widely abused feature that can lead to difficult to locate bugs. Tune in to this episode to learn how to use useEffect correctly.
What will it take to drive React and the surrounding JavaScript ecosystem forward in a dramatic way? How much better can we make it in the next 20 years? In this episode we discuss major and fundamental improvements that should be made.
In this episode we talk about the upcoming React 18 release. This is a very exciting release, especially from a performance perspective, as it finally brings concurrent and interruptible rendering along with other exciting changes!
Do you have a bottleneck in your React application? If so, we're going to discuss the best ways to find and solve it based on the principles I've outlined in my follow-up book to "Foundations of High Performance React" called "High Performance React." We're going to use an example bottleneck I solved recently for a client that was making their application unusable in some critical circumstances.
How do you both write code quickly but also minimize the number of times your weekend will be ruined by nasty bug reports? In this episode we're going to talk about how to write and ship React applications quickly while also minimizing the number and extent of the bugs that make it into production!
Debugging can be extremely frustrating and time consuming, but it doesn't have to be. In this Q & A session we will talk about techniques to more efficiently debug React applications and how to do it without wanting to tear your hair out.
Should you use Material UI for your React component library or are there better alternatives? Join us as we discuss React component libraries for our first episode.