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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-12076221
+ Fri, 20 Jan 2023 07:00:00 -0800
+
+
+ 2232
+
+ 1
+ 73
+ full
+ false
+
+
+ Learning React on Only 3 Hours Per Week While Working Full-Time
+ Learning React on Only 3 Hours Per Week While Working Full-Time
+ 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.
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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-12033274
+ Fri, 13 Jan 2023 07:00:00 -0800
+
+
+ 2266
+
+ 1
+ 72
+ full
+ false
+
+
+ Testing & useEffect: Porting RN App to Web
+ Testing & useEffect: Porting RN App to Web
+ 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.
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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11941927
+ Fri, 30 Dec 2022 07:00:00 -0800
+
+
+ 2255
+
+ 1
+ 71
+ full
+ false
+
+
+ React 2022 Year in Review: Foundational Changes
+ React 2022 Year in Review: Foundational Changes
+ 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.
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.
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!
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11912454
+ Wed, 21 Dec 2022 11:00:00 -0800
+ 778
+
+ 1
+ 69
+ full
+ false
+
+
+ How I Built My Own React
+ How I Built My Own React
+ 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.
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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11879575
+ Fri, 16 Dec 2022 07:00:00 -0800
+
+
+ 1534
+
+ 1
+ 68
+ full
+ false
+
+
+ FAQ on Typescript and Svelte
+ FAQ on Typescript and Svelte
+ 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.
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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11802072
+ Fri, 09 Dec 2022 07:00:00 -0800
+
+
+ 2183
+
+ 1
+ 67
+ full
+ false
+
+
+ Thinking in React
+ Thinking in React
+ 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?
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?
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11802002
+ Fri, 02 Dec 2022 08:00:00 -0800
+
+
+ 2496
+
+ 1
+ 66
+ full
+ false
+
+
+ How Decentralized is Crypto, Really?
+ How Decentralized is Crypto, Really?
+ 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?
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?
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11757420
+ Fri, 25 Nov 2022 06:00:00 -0800
+
+
+ 3615
+
+ 1
+ 65
+ full
+ false
+
+
+ Concise-ish Beginner's Guide to Learning React
+ Concise-ish Beginner's Guide to Learning React
+ 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!
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!
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11683392
+ Sun, 13 Nov 2022 07:00:00 -0800
+
+ 2500
+
+ 1
+ 64
+ full
+ false
+
+
+ It’s Not Your Fault You Don’t Understand The Code
+ It’s Not Your Fault You Don’t Understand The Code
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11586984
+ Fri, 28 Oct 2022 10:00:00 -0700
+
+ 2902
+
+ 1
+ 63
+ full
+ false
+
+
+ Your Boss Is Wrong and How Slow Is React?
+ Your Boss Is Wrong and How Slow Is React?
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11533367
+ Fri, 21 Oct 2022 10:00:00 -0700
+
+ 2933
+
+ 1
+ 62
+ full
+ false
+
+
+ The Reality of Micro-Frontends and Why I Don't Recommend Them
+ The Reality of Micro-Frontends and Why I Don't Recommend Them
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11235167
+ Fri, 23 Sep 2022 10:00:00 -0700
+
+ 2825
+
+ 1
+ 60
+ full
+ false
+
+
+ Remix: As "Fast as Instant"?
+ Remix: As "Fast as Instant"?
+ We're finally going to dive into Remix and see what it's all about and if you should give it a try!
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11235154
+ Fri, 09 Sep 2022 10:00:00 -0700
+
+ 3226
+
+ 1
+ 59
+ full
+ false
+
+
+ Noobs vs Experts; with Kyle VerHoef
+ Noobs vs Experts; with Kyle VerHoef
+ 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!
Support the show]]>
+ 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!
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11193020
+ Fri, 26 Aug 2022 07:00:00 -0700
+
+ 3670
+
+ 1
+ 58
+ full
+ false
+
+
+ Oops I Built The Wrong Thing
+ Oops I Built The Wrong Thing
+ What do you do when you built the wrong feature or product? When your boss or client is upset?
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11130436
+ Sat, 13 Aug 2022 08:00:00 -0700
+
+ 2847
+
+ 1
+ 57
+ full
+ false
+
+
+ A New React Compiler!
+ A New React Compiler!
+
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11086813
+ Fri, 05 Aug 2022 10:00:00 -0700
+
+ 2258
+
+ 1
+ 56
+ full
+ false
+
+
+ Popcorn Anyone? Or, How to Load Assets The Right Way
+ Popcorn Anyone? Or, How to Load Assets The Right Way
+ 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
Support the show]]>
+ 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
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-11010316
+ Fri, 22 Jul 2022 10:00:00 -0700
+
+ 2030
+
+ 1
+ 55
+ full
+ false
+
+
+ Security From Unintentional Abusers
+ Security From Unintentional Abusers
+ What do you do when your users accidentally or even purposefully abuse your service or app?
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10966461
+ Fri, 15 Jul 2022 10:00:00 -0700
+
+ 2489
+
+ 1
+ 54
+ full
+ false
+
+
+ How to Start a New Project
+ How to Start a New Project
+ Or at least my method to starting and following through!
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10889643
+ Fri, 01 Jul 2022 10:00:00 -0700
+
+ 2347
+
+ 1
+ 53
+ full
+ false
+
+
+ How I Became Good at React in a Month
+ How I Became Good at React in a Month
+ Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10849241
+ Fri, 24 Jun 2022 10:00:00 -0700
+
+ 2905
+
+ 1
+ 52
+ full
+ false
+
+
+ Dan Abramov's Updated React Guide
+ Dan Abramov's Updated React Guide
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10795014
+ Fri, 17 Jun 2022 10:00:00 -0700
+
+ 3312
+
+ 1
+ 51
+ full
+ false
+
+
+ Forms Still Suck, Can We Design Something Better?
+ Forms Still Suck, Can We Design Something Better?
+ The challenge: forms suck in React today, can we design a better way to work with forms in React?
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10735883
+ Sat, 04 Jun 2022 10:00:00 -0700
+
+ 3074
+
+ 1
+ 50
+ full
+ false
+
+
+ How To Become A React Engineer
+ How To Become A React Engineer
+ Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
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.
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
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.
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10610563
+ Fri, 13 May 2022 10:00:00 -0700
+
+ 2385
+
+ 1
+ 48
+ full
+ false
+
+
+ How To Make Bad React Code Good
+ How To Make Bad React Code Good
+ Links
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10570193
+ Fri, 06 May 2022 10:00:00 -0700
+
+ 2894
+
+ 1
+ 47
+ full
+ false
+
+
+ React 18 Released! Everything you need to know
+ React 18 Released! Everything you need to know
+ Links
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?
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
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?
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10524868
+ Fri, 29 Apr 2022 10:00:00 -0700
+
+ 2618
+
+ 1
+ 46
+ full
+ false
+
+
+ How to Build React Features Right the First Time™
+ How to Build React Features Right the First Time™
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10402825
+ Fri, 08 Apr 2022 10:00:00 -0700
+
+ 4679
+
+ 1
+ 45
+ full
+ false
+
+
+ Why React Should Die
+ Why React Should Die
+ Is React the final answer? Is it possible today to take React’s shortcomings to create something better than React?
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10365089
+ Sat, 02 Apr 2022 10:00:00 -0700
+
+ 4395
+
+ 1
+ 44
+ full
+ false
+
+
+ How JavaScript Actually Executes
+ How JavaScript Actually Executes
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10317720
+ Fri, 25 Mar 2022 10:00:00 -0700
+
+ 4738
+
+ 1
+ 43
+ full
+ false
+
+
+ What's the Hype about Shopify Hydrogen?
+ What's the Hype about Shopify Hydrogen?
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10278986
+ Sat, 19 Mar 2022 10:00:00 -0700
+
+ 4870
+
+ 1
+ 42
+ full
+ false
+
+
+ Preventing Startup Burnout with Brian Wetzel (Part 2)
+ Preventing Startup Burnout with Brian Wetzel (Part 2)
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10229771
+ Fri, 11 Mar 2022 10:00:00 -0800
+
+ 4201
+
+ 1
+ 41
+ full
+ false
+
+
+ Preventing Startup Burnout with Brian Wetzel (Part 1)
+ Preventing Startup Burnout with Brian Wetzel (Part 1)
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10181548
+ Fri, 04 Mar 2022 10:00:00 -0800
+
+ 4564
+
+ 1
+ 40
+ full
+ false
+
+
+ Taking the Pain Out of Forms in React
+ Taking the Pain Out of Forms in React
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10138345
+ Fri, 25 Feb 2022 10:00:00 -0800
+
+ 4099
+
+ 1
+ 39
+ full
+ false
+
+
+ What are React Server Components and Why They're Awesome!
+ What are React Server Components and Why They're Awesome!
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10037837
+ Fri, 18 Feb 2022 10:00:00 -0800
+
+ 3549
+
+ 1
+ 38
+ full
+ false
+
+
+ React Fibers / How Your App Actually Executes
+ React Fibers / How Your App Actually Executes
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10037718
+ Fri, 11 Feb 2022 10:00:00 -0800
+
+ 4914
+
+ 1
+ 37
+ full
+ false
+
+
+ How to successfully test React apps to speed up development / Using Cypress
+ How to successfully test React apps to speed up development / Using Cypress
+ 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.
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?
Successfully Maintaining Tests?
When to write tests?
Cypress tips & tricks
Custom commands
Capturing values
Example: capture a numeric value, do test, check t
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.
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?
Successfully Maintaining Tests?
When to write tests?
Cypress tips & tricks
Custom commands
Capturing values
Example: capture a numeric value, do test, check t
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-10011866
+ Fri, 04 Feb 2022 10:00:00 -0800
+
+ 5663
+
+ 1
+ 36
+ full
+ false
+
+
+ Chris Keen on Succeeding as a React Contractor
+ Chris Keen on Succeeding as a React Contractor
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9935994
+ Fri, 28 Jan 2022 10:00:00 -0800
+
+ 5375
+
+ 1
+ 35
+ full
+ false
+
+
+ Query Caching, Why You Must Use It With React; Using React Query
+ Query Caching, Why You Must Use It With React; Using React Query
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9926848
+ Fri, 21 Jan 2022 10:00:00 -0800
+
+ 4932
+
+ 1
+ 34
+ full
+ false
+
+
+ Where and How to Store Data from Your React Application
+ Where and How to Store Data from Your React Application
+ 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
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?
How often does the code-base change?
Where to Host Your Database
Self Hosted
Privacy
More “maintenance” but not really if you do it right.
Databases A
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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
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?
How often does the code-base change?
Where to Host Your Database
Self Hosted
Privacy
More “maintenance” but not really if you do it right.
Databases A
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9886172
+ Fri, 14 Jan 2022 10:00:00 -0800
+
+ 4816
+
+ 1
+ 33
+ full
+ false
+
+
+ How To Stop Wasting Your Time
+ How To Stop Wasting Your Time
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9842114
+ Fri, 07 Jan 2022 10:00:00 -0800
+
+ 5431
+
+ 1
+ 32
+ full
+ false
+
+
+ React Component Lifecycle, What is a Component?
+ React Component Lifecycle, What is a Component?
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9811470
+ Fri, 31 Dec 2021 10:00:00 -0800
+
+ 4505
+
+ 1
+ 31
+ full
+ false
+
+
+ Why You Need To Check Software Licenses
+ Why You Need To Check Software Licenses
+ 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
Support the show]]>
+ 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
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9781457
+ Fri, 24 Dec 2021 10:00:00 -0800
+
+ 5350
+
+ 1
+ 30
+ full
+ false
+
+
+ Alternatives to the Software Interview / Getting a React Job
+ Alternatives to the Software Interview / Getting a React Job
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9740045
+ Fri, 17 Dec 2021 10:00:00 -0800
+
+ 5893
+
+ 1
+ 29
+ full
+ false
+
+
+ What Do You Think of React? And other QA with Austin & Thomas
+ What Do You Think of React? And other QA with Austin & Thomas
+ 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.
Support the show]]>
+ 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.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9698201
+ Fri, 10 Dec 2021 10:00:00 -0800
+
+ 6020
+
+ 1
+ 28
+ full
+ false
+
+
+ Refactoring Quickly, Safely, and Easily
+ Refactoring Quickly, Safely, and Easily
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9656919
+ Fri, 03 Dec 2021 10:00:00 -0800
+
+ 2975
+
+ 1
+ 27
+ full
+ false
+
+
+ How to Diagnose React App Bottlenecks with the Profiler
+ How to Diagnose React App Bottlenecks with the Profiler
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9608790
+ Fri, 26 Nov 2021 10:00:00 -0800
+
+ 3586
+
+ 1
+ 26
+ full
+ false
+
+
+ So, Where Do You Host Your React App?
+ So, Where Do You Host Your React App?
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9545960
+ Fri, 19 Nov 2021 10:00:00 -0800
+
+ 5463
+
+ 1
+ 25
+ full
+ false
+
+
+ Is Your React App Killing The Planet?
+ Is Your React App Killing The Planet?
+ 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
Support the show]]>
+ 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
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9502941
+ Fri, 12 Nov 2021 10:00:00 -0800
+
+ 4741
+
+ 1
+ 24
+ full
+ false
+
+
+ Better Routing in React with NextJS
+ Better Routing in React with NextJS
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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
Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9464470
+ Fri, 05 Nov 2021 10:00:00 -0700
+
+ 3725
+
+ 1
+ 23
+ full
+ false
+
+
+ Debug Smarter in your React Apps
+ Debug Smarter in your React Apps
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9451117
+ Fri, 29 Oct 2021 10:00:00 -0700
+
+ 3789
+
+ 1
+ 22
+ full
+ false
+
+
+ Your Boss Asks for an Estimate--What Do You Say?
+ Your Boss Asks for an Estimate--What Do You Say?
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9402933
+ Fri, 22 Oct 2021 10:00:00 -0700
+
+ 6100
+
+ 1
+ 21
+ full
+ false
+
+
+ Discussing React Program Structure and Learning to Learn
+ Discussing React Program Structure and Learning to Learn
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9311649
+ Fri, 15 Oct 2021 10:00:00 -0700
+
+ 2083
+
+ 1
+ 20
+ full
+ false
+
+
+ How software teams should be structured
+ How software teams should be structured
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9310587
+ Fri, 08 Oct 2021 10:00:00 -0700
+
+ 6132
+
+ 1
+ 19
+ full
+ false
+
+
+ How does React Render?
+ How does React Render?
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9277254
+ Fri, 01 Oct 2021 10:00:00 -0700
+
+ 5293
+
+ 1
+ 18
+ full
+ false
+
+
+ How to become a better programmer
+ How to become a better programmer
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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.Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9221145
+ Fri, 24 Sep 2021 10:00:00 -0700
+
+ 3804
+
+ 1
+ 17
+ full
+ false
+
+
+ Building Flows, Not Apps
+ Building Flows, Not Apps
+ 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? Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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? Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ Owl Creek Studios
+
+ Buzzsprout-9212081
+ Fri, 17 Sep 2021 10:00:00 -0700
+
+ 3510
+
+ 1
+ 16
+ full
+ false
+
+
+ Why Hooks Suck
+ Why Hooks Suck
+ 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!Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
Support the show]]>
+ 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!Welcome to CyrusOne Connects Join us to uncover the latest insights and advances in the data center sector and beyond.
+
+ >
+ )
+}
diff --git a/src/app/(extra)/book/head.jsx b/src/app/(extra)/book/head.jsx
new file mode 100644
index 0000000..fdfa574
--- /dev/null
+++ b/src/app/(extra)/book/head.jsx
@@ -0,0 +1,10 @@
+import StandardHead from '@/components/StandardHead';
+
+export default async function Head({ params }) {
+ return (
+
+ );
+};
diff --git a/src/app/(extra)/book/page.jsx b/src/app/(extra)/book/page.jsx
new file mode 100644
index 0000000..0c43bb2
--- /dev/null
+++ b/src/app/(extra)/book/page.jsx
@@ -0,0 +1,191 @@
+import Head from 'next/head'
+import Image from 'next/image'
+
+import BookPurchaseCTA from '@/components/BookPurchaseCTA'
+import BookTitle from '@/components/BookTitle'
+import JustifiedSection from '@/components/JustifiedSection'
+import JustifiedSectionReversed from '@/components/JustifiedSectionReversed'
+import { Box } from '@/components/Components'
+
+import bookImage from '@/images/foundations.png'
+import authorImage from '@/images/headshot.jpg'
+
+const chapters = [
+ 'Preface',
+ 'Acknowledgments',
+ 'Introduction',
+ 'Components of React',
+ 'Markup in JavaScript: JSX',
+ 'Getting Ready to Render with createElement',
+ 'Render: Putting Elements on the Screen',
+ 'Reconciliation, or How React Diffs',
+ 'Fibers: Splitting up Render',
+ 'Putting it all together',
+ 'Conclusion'
+];
+
+export default async function Page({ params }) {
+ return (
+ <>
+
+ Foundations of High-Performance React
+
+
+
+
+
+
+
+ It All Starts With Understanding The Foundation
+
+
+ It can be hard to create high-performance React applications without having a firm understanding of the foundations. In this book you'll create your own version of React that will give you a deep insight into the performance of React itself.
+
+ React performance can be a mystery. When your app performance degrades it isn't always clear where to look or how to fix the issue. Foundations of High-Performance React Applications is a mini-book exploring what makes React itself behave the way it does. Armed with this knowledge you will be better equipped to build your own high-performance React applications and correctly diagnose bottlenecks.
+
+
+ Beyond diagnosing bottlenecks, this book teaches the fundamentals of how React renders. By the end of the book you will not only know exactly how React works internally but you’ll also have a deep understanding of how to build React applications that take full advantage of the strengths of the React architecture.
+
+
+ The book takes you through the process of creating your own “mini” version of React that is based on the same heuristic algorithms React is. You will not only learn how React renders but be able to see it demonstrated in the included source code.
+
+
+
+
+ {chapters.map((c, i) => (
+
+ {c}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ “I might be new to React but it was entertaining and clearly communicated.”
+
+
+
+
+ About the Author
+
+
+ )} bg="gray-800">
+
+ Thomas Hintz has been a web developer for two decades and has been in the software industry for 13 years as an engineer and engineering manager. Creator of the 3L Operating System, a Lisp Compiler, web server, web sockets library, and much more.
+
+
+ Author of wildly popular essays like “Work When You Feel Like It”, creator of the fastest websockets server library, and serial speaker at bay-area software events.
+
+
+ >
+ )
+}
diff --git a/src/app/(extra)/layout.jsx b/src/app/(extra)/layout.jsx
new file mode 100644
index 0000000..9a53b19
--- /dev/null
+++ b/src/app/(extra)/layout.jsx
@@ -0,0 +1,10 @@
+import NavBar from '@/components/NavBar'
+
+export default function ExtraLayout({children}) {
+ return (
+
+
+ {children}
+
+ );
+}
diff --git a/src/app/(main)/contact-success/page.jsx b/src/app/(main)/contact-success/page.jsx
new file mode 100644
index 0000000..bed3b67
--- /dev/null
+++ b/src/app/(main)/contact-success/page.jsx
@@ -0,0 +1,18 @@
+import { Container } from '@/components/Container'
+
+export default async function Page({}) {
+ return (
+
+
+
+ Contact Us
+
+
+
+ Message sent successfully! Thank you!
+
+
+
+
+ );
+}
diff --git a/src/app/(main)/contact-us/head.jsx b/src/app/(main)/contact-us/head.jsx
new file mode 100644
index 0000000..3413edd
--- /dev/null
+++ b/src/app/(main)/contact-us/head.jsx
@@ -0,0 +1,10 @@
+import StandardHead from '@/components/StandardHead';
+
+export default async function Head({ params }) {
+ return (
+
+ );
+};
diff --git a/src/app/(main)/contact-us/page.jsx b/src/app/(main)/contact-us/page.jsx
new file mode 100644
index 0000000..d14b394
--- /dev/null
+++ b/src/app/(main)/contact-us/page.jsx
@@ -0,0 +1,155 @@
+import { redirect } from 'next/navigation';
+import nodemailer from 'nodemailer';
+import sanitizeHtml from 'sanitize-html';
+
+import { Container } from '@/components/Container'
+
+export default async function Page({ searchParams }) {
+ const firstName = searchParams['first-name'];
+ const lastName = searchParams['last-name'];
+ const email = searchParams['email'];
+ const message = searchParams['message'];
+ const submitted = firstName || lastName || email || message;
+ const valid = submitted && firstName && lastName && email && message;
+ let emailSentSuccessfully = false;
+
+ if (valid) {
+ const transporter = nodemailer.createTransport({
+ host: process.env.CONTACT_HOST,
+ port: 587,
+ secure: false, // true for 465, false for other ports
+ auth: {
+ user: process.env.CONTACT_USER,
+ pass: process.env.CONTACT_PASSWORD,
+ },
+ });
+
+ // send mail with defined transport object
+ await transporter.sendMail({
+ from: `"${firstName} ${lastName}" <${process.env.CONTACT_FROM_ADDRESS}>`,
+ replyTo: `"${firstName} ${lastName}" <${email}>`,
+ to: process.env.CONTACT_TO_ADDRESS,
+ subject: "The React Show - Form Submission",
+ text: message,
+ html: sanitizeHtml(message, {
+ allowedTags: [],
+ allowedAttributes: {}
+ }),
+ });
+ redirect('/contact-success')
+ }
+
+ return (
+
+
+
+ Contact Us
+
+ {valid && !emailSentSuccessfully && (
+
+
+ Unable to send message. Please go back and reload the page and try again or try again later. Sorry!
+
+
+ )}
+ {!valid && (
+
+
+ Like the show? Want to hear us talk about something specific? Or just want to say hi? We’d love to hear from you!
+
+ In this show, Thomas digs deep to understand React and how best to utilize it while discussing real world experiences with: React, programming, and software engineering. Tune in every Friday (usually) to hear the latest in the React community.
+