Javascript

State Machines using XState and Svelte (Part 1)

Published Jan 11, 2022

Updated Feb 13, 2023

5 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

State Machines using XState and Svelte (Part 1)

In this blog post, we'll learn about state machines, and how to implement them in Svelte with XState.

What's a State Machine

A state machine is a representation- an abstraction of the behavior of a system.
A Finite State Machine (FSM) is a State machine that can have only one state at a given time, and has a finite number of states.
Other properties for FSMs are having an initial state, and a finite number of events.
Given a state and an event, a transition function will determine what the next state is.

What's XState

XState is a library that will allow us to create and interpret FSMs and statecharts. Its core is framework agnostic, and there are utilities for many of them.

Our first state machine with Svelte

We'll start from a basic component, add features to it, and then we'll create a state machine that will have the same behavior. Let's create a new project.

npm init vite@latest

✔ Project name: · xstate-svelte
✔ Select a framework: · svelte
✔ Select a variant: · svelte-ts

cd xstate-svelte
npm install //use the package manager you prefer
npm run dev

Our project contains a Counter component that looks like the one below. We'll start from here to model our state machine later.

<!-- Counter.svelte -->
<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  Clicks: {count}
</button>

<style>
  button {
    font-family: inherit;
    font-size: inherit;
    padding: 1em 2em;
    color: #ff3e00;
    background-color: rgba(255, 62, 0, 0.1);
    border-radius: 2em;
    border: 2px solid rgba(255, 62, 0, 0);
    outline: none;
    width: 200px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
  }

  button:focus {
    border: 2px solid #ff3e00;
  }

  button:active {
    background-color: rgba(255, 62, 0, 0.2);
  }
</style>

Our component is a button that can increment a count when clicking it. Let's add some functionality to it like adding the possibility to decrement the count as well.

<!-- Counter.svelte -->
<script lang="ts">
  let count: number = 0
  const increment = () => {
    count += 1
  }
  const decrement = () => {
    count -= 1
  }
</script>

<p>Count: {count}</p>
<button on:click={increment}>
  Increment
</button>
<button on:click={decrement}>
  Decrement
</button>

<!-- ... -->

Our component is working, but let's say we would like to avoid reaching a count below 0 or above 10, we would have to add a guard to avoid calling the increment or decrement functions when the minimum or maximum values are reached.

<!-- Counter.svelte -->
<!-- ... -->
<button
  on:click={() => {
    if (count < 10) {
      increment();
    }
  }}
>
  Increment
</button>
<button
  on:click={() => {
    if (count > 0) {
      decrement();
    }
  }}
>

<!-- ... -->

Finally, let's add a button to turn the counter on and off, and enable or disable changing the count.

<!-- Counter.svelte -->
<script lang="ts">
  let count: number = 0;
  let active: boolean = true
  const increment = () => {
    count += 1;
  };
  const decrement = () => {
    count -= 1;
  };
  const toggleActive = () => {
    active = !active
  };
</script>
<p>The counter is {active ? "enabled": "disabled"}</p>
<p>Count: {count}</p>
<button
  on:click={() => {
    if (active && count < 10) {
      increment();
    }
  }}
>
  Increment
</button>
<button
  on:click={() => {
    if (active && count > 0) {
      decrement();
    }
  }}
>
  Decrement
</button>

<button
  on:click={toggleActive}
>
  On/Off
</button>

<!-- ... -->

Now, it's finally time to recreate this same component but using XState.

First, we'll need to install the required dependencies.

npm i xstate @xstate/svelte --save

Before we dive into the code, let's think about our state machine. If we could define the properties of it, it would look something like this.

possible states: enabled - disabled
possible events: increment-decrement - enable/disable
initial state: enabled
guards: max value, min value
context: in this case, the count value

If we start expressing this as an object, we could do something like:

{
	// initial state,
	initial: enabled 
	// possible states (StateNodes)
	states:{
		enabled: {
		},
		disabled: {
		}
	},
}

Each key inside our states object will represent a StateNode with its configuration. To add the events, we will use an object too, and they can be declared inside of a specific state, or at the root of the configuration object if it's global. In our example:

{
	initial: enabled 
	states:{
		enabled: {
			on: {
				increment: { // do something },
				decrement: { // do something },
				toggle: { // do something },
			}
		},
		disabled: {
			toggle: { // do something },
		}
	},
}

XState initializes a state machine with an object similar to this. We will change our Counter component to implement it. Starting from the original component to the final result.

<!-- Counter.svelte -->
<script lang="ts">
  import { createMachine, assign } from 'xstate';
  import { useMachine } from '@xstate/svelte';

  const enum States {
    Enabled = 'Enabled',
  }

  const enum Events {
    Increment = 'Increment',
  }

  const increment = (ctx) => ctx.count + 1;

  const counterMachine = createMachine({
    initial: States.Enabled,
    context: {
      count: 0,
    },
    states: {
      [States.Enabled]: {
        on: {
          [Events.Increment]: {
            actions: assign({ count: increment }),
          },
        },
      },
    },
  });

  const { state, send } = useMachine(counterMachine);
</script>

<button on:click={() => send(Events.Increment)}>
  Clicks: {$state.context.count}
</button>

First, we define the states, and events that our state machines will have and respond to:

Our initial counter had only one state, and one possible event.

Then, we define a function that will respond to that event, taking the state machine context, and adding 1 to the context count.

Next, we use the @xstate/svelte method useMachine that will return the state of the machine, and a method to send events to it.

Note that state is a Svelte store that you can subscribe to, to get the current state of the machine using the $ prefix.

In this example, $state.context.count is updated each time Events.Increment is sent.

To add the decrement functionality, we just need to add a new event and the corresponding handler.

<!-- Counter.svelte -->
<script lang="ts">
  // ...

 const enum Events {
    Increment = 'Increment',
    Decrement = 'Decrement',
  }

  const increment = (ctx) => ctx.count + 1;
  const decrement = (ctx) => ctx.count - 1;

  const counterMachine = createMachine({
    initial: States.Enabled,
    context: {
      count: 0,
    },
    states: {
      [States.Enabled]: {
        on: {
          [Events.Increment]: {
            actions: assign({ count: increment }),
          },
          [Events.Decrement]: {
            actions: assign({ count: decrement }),
          },
        },
      },
    },
  });

  const { state, send } = useMachine(counterMachine);
</script>

<p>Count: {$state.context.count}</p>
<button on:click={() => send(Events.Increment)}>
  Increment
</button>
<button on:click={() => send(Events.Decrement)}>
  Decrement
</button>

To add guards to our events, we will need to set the cond property of the event handlers. If the conditions are met, then the actions are triggered.

<!-- Counter.svelte -->
<script lang="ts">
  // ...

  const counterMachine = createMachine({
    initial: States.Enabled,
    context: {
      count: 0,
    },
    states: {
      [States.Enabled]: {
        on: {
          [Events.Increment]: {
            actions: assign({ count: increment }),
            cond: (ctx) => ctx.count < 10,
          },
          [Events.Decrement]: {
            actions: assign({ count: decrement }),
            cond: (ctx) => ctx.count > 0,
          },
        },
      },
    },
  });

  const { state, send } = useMachine(counterMachine);
</script>

<!-- ... -->

One last part, and we are done. We are missing the enable/disable button. In this case, we will add an event and a new state.

<!-- Counter.svelte -->
<script lang="ts">
  // ...

  const enum States {
    Enabled = 'Enabled',
    Disabled = 'Disabled',
  }

  const enum Events {
    Increment = 'Increment',
    Decrement = 'Decrement',
    ToggleEnabled = 'ToggleEnabled',
  }

  const increment = (ctx) => ctx.count + 1;
  const decrement = (ctx) => ctx.count - 1;

  // Set state machine
  const counterMachine = createMachine({
    initial: States.Enabled,
    context: {
      count: 0,
    },
    states: {
      [States.Enabled]: {
        on: {
          [Events.Increment]: {
            actions: assign({ count: increment }),
            cond: (ctx) => ctx.count < 10,
          },
          [Events.Decrement]: {
            actions: assign({ count: decrement }),
            cond: (ctx) => ctx.count > 0,
          },
          [Events.ToggleEnabled]: States.Disabled
        },
      },
      [States.Disabled]: {
        on: {
          [Events.ToggleEnabled]: States.Enabled
        },
      },
    },
  });

  const { state, send } = useMachine(counterMachine);
</script>

<p>The counter is {$state.value === States.Enabled ? "enabled": "disabled"}</p>
<p>Count: {$state.context.count}</p>
<button on:click={() => send(Events.Increment)}> Increment </button>
<button on:click={() => send(Events.Decrement)}> Decrement </button>
<button on:click={() =

<!-- ... -->

We are now defining a new state Disabled that will only handle the toggle event that will change the state to Enabled. We do the opposite when the counter is on.

Let's focus on this line of the previous example

[Events.ToggleEnabled]: States.Enabled

The response to this event looks a lot different than the previous ones. In the example above, we're using the shorthand value when you only need to transition from one state to another.

It's equivalent to:

[Events.ToggleEnabled]: {
  target: States.Enabled,
}

The transition configuration object has the following signature:

interface TransitionConfig<TContext', TEvent'> {
cond?: Condition<TContext', TEvent'> // define a guard to this transition
actions?: Actions<TContext', TEvent'> // what actions to perform
in?: StateValue
internal?: boolean
target?: TransitionTarget<TContext', TEvent'> // the next State
meta?: Record<string, any>
description?: string
}

Statecharts

Statecharts are a visual representation of the states of a process.

The best part is that we don't need to change our code to see it in action.

Go to https://stately.ai/viz, and paste this part of the code.

import { createMachine, assign } from 'xstate';

const enum States {
    Enabled = 'Enabled',
    Disabled = 'Disabled',
  }

  const enum Events {
    Increment = 'Increment',
    Decrement = 'Decrement',
    ToggleEnabled = 'ToggleEnabled',
  }

  const increment = (ctx) => ctx.count + 1;
  const decrement = (ctx) => ctx.count - 1;

  // Set state machine
  const counterMachine = createMachine({
    initial: States.Enabled,
    context: {
      count: 0,
    },
    states: {
      [States.Enabled]: {
        on: {
          [Events.Increment]: {
            actions: assign({ count: increment }),
            cond: (ctx) => ctx.count < 10,
          },
          [Events.Decrement]: {
            actions: assign({ count: decrement }),
            cond: (ctx) => ctx.count > 0,
          },
          [Events.ToggleEnabled]: States.Disabled
        },
      },
      [States.Disabled]: {
        on: {
          [Events.ToggleEnabled]: States.Enabled
        },
      },
    },
  });

Next, click the Visualize button, and enjoy your statechart.

We can see that the toggleEnabled event changes from enabled to disabled and vice-versa. At the same time, the other events are available or not, depending on the current state (represented in light blue when available).

This is a nice way of visualizing our state machine, you could even start from here, and then move to your favorite framework. It may help spot issues and challenges early.

What's Next

In this intro to XState and Svelte, we learned how to transform a simple component to use state machines. In the next part of this series, we'll create a more complex app, and we'll explore the API in depth.

You can find the code from this tutorial in this repo.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

About the author(s)

Ignacio Falk
I love to learn new things and share what I know. Mentor, Writer, Speaker Member of the local community
@flakolefluk @flakolefluk

Introduction to Zod for Data Validation

As web developers, we're often working with data from external sources like APIs we don't control or user inputs submitted to our backends. We can't always rely on this data to take the form we expect, and we can encounter unexpected errors when it deviates from expectations. But with the Zod library, we can define what our data ought to look like and parse the incoming data against those defined schemas. This lets us work with that data confidently, or to quickly throw an error when it isn't correct. Why use Zod? TypeScript is great for letting us define the shape of our data in our code. It helps us write more correct code the first time around by warning us if we are doing something we shouldn't. But TypeScript can't do everything for us. For example, we can define a variable as a string or a number, but we can't say "a string that starts with user_id_ and is 20 characters long" or "an integer between 1 and 5". There are limits to how much TypeScript can narrow down our data for us. Also, TypeScript is a tool for us developers. When we compile our code, our types are not available to the vanilla JavaScript. JavaScript can't validate that the data we actually use in our code matches what we thought we'd get when we wrote our TypeScript types unless you're willing to manually write code to perform those checks. This is where we can reach for a tool like Zod. With Zod, we can write data schemas. These schemas, in the simplest scenarios, look very much like TypeScript types. But we can do more with Zod than we can with TypeScript alone. Zod schemas let us create additional rules for data parsing and validation. A 20-character string that starts with user_id_? It's z.string().startsWith('user_id_').length(20). An integer between 1 and 5 inclusive? It's z.number().int().gte(1).lte(5). Zod's primitives give us many extra functions to be more specific about *exactly* what data we expect. Unlike TypeScript, Zod schemas aren't removed on compilation to JavaScript—we still have access to them! If our app receives some data, we can verify that it matches the expected shape by passing it to your Zod schema's parse function. You'll either get back your data in exactly the shape you defined in your schema, or Zod will give you an error to tell you what was wrong. Zod schemas aren't a replacement for TypeScript; rather, they are an excellent complement. Once we've defined our Zod schema, it's simple to derive a TypeScript type from it and to use that type as we normally would. But when we really need to be sure our data conforms to the schema, we can always parse the data with our schema for that extra confidence. Defining Data Schemas Zod schemas are the variables that define our expectations for the shape of our data, validate those expectations, and transform the data if necessary to match our desired shape. It's easy to start with simple schemas, and to add complexity as required. Zod provides different functions that represent data structures and related validation options, which can be combined to create larger schemas. In many cases, you'll probably be building a schema for a data object with properties of some primitive type. For example, here's a schema that would validate a JavaScript object representing an order for a pizza: ` Zod provides a number of primitives for defining schemas that line up with JavaScript primitives: string, number, bigint, boolean, date, symbol, undefined, and null. It also includes primitives void, any, unknown, and never for additional typing information. In addition to basic primitives, Zod can define object, array, and other native data structure schemas, as well as schemas for data structures not natively part of JavaScript like tuple and enum. The documentation contains considerable detail on the available data structures and how to use them. Parsing and Validating Data with Schemas With Zod schemas, you're not only telling your program what data should look like; you're also creating the tools to easily verify that the incoming data matches the schema definitions. This is where Zod really shines, as it greatly simplifies the process of validating data like user inputs or third party API responses. Let's say you're writing a website form to register new users. At a minimum, you'll need to make sure the new user's email address is a valid email address. For a password, we'll ask for something at least 8 characters long and including one letter, one number, and one special character. (Yes, this is not really the best way to write strong passwords; but for the sake of showing off how Zod works, we're going with it.) We'll also ask the user to confirm their password by typing it twice. First, let's create a Zod schema to model these inputs: ` So far, this schema is pretty basic. It's only making sure that whatever the user types as an email is an email, and it's checking that the password is at least 8 characters long. But it is *not* checking if password and confirmPassword match, nor checking for the complexity requirements. Let's enhance our schema to fix that! ` By adding refine with a custom validation function, we have been able to verify that the passwords match. If they don't, parsing will give us an error to let us know that the data was invalid. We can also chain refine functions to add checks for our password complexity rules: ` Here we've chained multiple refine functions. You could alternatively use superRefine, which gives you even more fine grained control. Now that we've built out our schema and added refinements for extra validation, we can parse some user inputs. Let's see two test cases: one that's bound to fail, and one that will succeed. ` There are two main ways we can use our schema to validate our data: parse and safeParse. The main difference is that parse will throw an error if validation fails, while safeParse will return an object with a success property of either true or false, and either a data property with your parsed data or an error property with the details of a ZodError explaining why the parsing failed. In the case of our example data, userInput2 will parse just fine and return the data for you to use. But userInput1 will create a ZodError listing all of the ways it has failed validation. ` ` We can use these error messages to communicate to the user how they need to fix their form inputs if validation fails. Each error in the list describes the validation failure and gives us a human readable message to go with it. You'll notice that the validation errors for checking for a valid email and for checking password length have a lot of details, but we've got three items at the end of the error list that don't really tell us anything useful: just a custom error of Invalid input. The first is from our refine checking if the passwords match, and the second two are from our refine functions checking for password complexity (numbers and special characters). Let's modify our refine functions so that these errors are useful! We'll add our own error parameters to customize the message we get back and the path to the data that failed validation. ` Now, our error messages from failures in refine are informative! You can figure out which form fields aren't validating from the path, and then display the messages next to form fields to let the user know how to remedy the error. ` By giving our refine checks a custom path and message, we can make better use of the returned errors. In this case, we can highlight specific problem form fields for the user and give them the message about what is wrong. Integrating with TypeScript Integrating Zod with TypeScript is very easy. Using z.infer<typeof YourSchema> will allow you to avoid writing extra TypeScript types that merely reflect the intent of your Zod schemas. You can create a type from any Zod schema like so: ` Using a TypeScript type derived from a Zod schema does *not* give you any extra level of data validation at the type level beyond what TypeScript is capable of. If you create a type from z.string.min(3).max(20), the TypeScript type will still just be string. And when compiled to JavaScript, even that will be gone! That's why you still need to use parse/safeParse on incoming data to validate it before proceeding as if it really does match your requirements. A common pattern with inferring types from Zod schemas is to use the same name for both. Because the schema is a variable, there's no name conflict if the type uses the same name. However, I find that this can lead to confusing situations when trying to import one or the other—my personal preference is to name the Zod schema with Schema at the end to make it clear which is which. Conclusion Zod is an excellent tool for easily and confidently asserting that the data you're working with is exactly the sort of data you were expecting. It gives us the ability to assert at runtime that we've got what we wanted, and allows us to then craft strategies to handle what happens if that data is wrong. Combined with the ability to infer TypeScript types from Zod schemas, it lets us write and run more reliable code with greater confidence....

Nov 15, 2024

7 mins

JavaScriptZod

Learning Paths for Next.JS Developers with Ankita Kulkarni

In this video, Rob Ocel and co-hosts Tracy Lee, Adam Rackis, and Danny Thompson talk with tech educator Ankita Kulkarni about her journey from engineering leader to full-time educator. Ankita shares insights on teaching Next.js, bridging practical knowledge gaps, and helping developers tackle real-world challenges. They discuss Next.js as a React-based framework, its benefits, and the challenges it presents for beginners. Chapters - Introduction to the Podcast and Guests 00:01 - Meet Ankita Kulkarni, Tech Educator 00:26 - Ankita's Transition to Full-Time Education 01:41 - Teaching Practical Knowledge in Next.js 03:19 - Effective Methods for Teaching Next.js 05:27 - Challenges of Being a Full-Time Educator 07:48 - Balancing Broad and Specific Examples 09:54 - Embracing Mistakes as a Teaching Tool 12:13 - Pair Programming and Mentorship 14:00 - Discussion on Next.js and Framework Adoption 16:48 - Advantages and Challenges of Next.js 18:12 - Choosing the Right Framework for Your Needs 20:35 - Impact of Next.js in React Documentation 22:26 - Learning Paths for New Developers 23:24 - The Rise of Full-Stack Web Development 25:09 - Benefits of Frameworks Abstracting Complexity 26:27 - OpenNext and Deployment Flexibility 28:06 - Ankita's Excitement for New Next.js Features 30:35 - The Future of Next.js Without Vercel 32:16 - Final Thoughts and Where to Find Everyone Online 34:21 Follow Ankita Kulkarni on Social Media Twitter: https://x.com/kulkarniankita9 YouTube: https://www.youtube.com/@kulkarniankita Sponsored by This Dot: thisdot.co...

Nov 12, 2024

2 mins

NextJSJavaScript

What is Cypress Studio?

Introduction Cypress Studio has been around for some time. It was introduced in Cypress v6.3.0, removed in v10, and reintroduced in v10.7.0. This blog post will dive into its current state and how to use it today. What is Cypress Studio Cypress Studio is a tool built on top of Cypress. It offers an interface for creating tests as if you were using your site without requiring code to be written. It adds functionality to query elements and to add assertions from the interface. It's important to note that Cypress Studio is still under an experimental flag and lacks support for Component Testing (another feature of Cypress). Creating an app to test We first need a working app because the tool we will use is meant for end-to-end tests. I'll pick Svelte and Vite for this demo, but you can choose any framework. Cypress is agnostic in that matter. ` Make sure to select the Svelte and Typescript options to follow along. Now open your project location, install dependencies, and start your app to ensure everything works correctly. ` Installing and setting up Cypress Studio Now it's time to add Cypress to our dev dependencies. ` With our dependency installed, let's launch it so we can start configuring it. But first let’s add an entry under scripts in our package.json file. ` ` A new window will open that will guide us through the initial setup. Select the "E2E Testing" option to create the required configuration files. Then, you can close the window. A new folder called cypress and a configuration file cypress.config.ts are created at the root of our project. To enable Cypress Studio, we must open the newly created configuration file and add the experimentalStudio property. ` For this project, we need to ensure that TypeScript is configured properly for Cypress when it runs, as it conflicts with the one in our root folder. We will extend the original typescript configuration and override some properties. Create a new tsconfig.json file inside the' cypress' folder. ` You can find more information on setting up TypeScript with Cypress in their documentation Creating tests Now that our setup is complete let's write our first test. We will create a folder called e2e and a new test file. ` Open the new file and create an outline of your tests. Don't add anything to them. I initialized my file with a few tests. ` There is an option to create spec files from the interface, but it will contain some initial content that you most likely remove. There’s third option to scaffold multiple specs files, these can serve as a learning resource for writing tests as it contains many different scenarios tested. Make sure your app is running and, in another terminal, start cypress. ` Select E2E testing and Chrome. You should now see a list with all your test files. Click on home.cy.ts. Your tests will run and pass because we have not made any assertions. This looks the same as if we haven't enabled Studio, but there's a new detail added when you hover on any of the tests: a magic wand that you can click to start recording events and adding assertions directly in the UI. Let's start with our first tests and check what assertions we can make. The first step is to navigate to a page. This interaction will be recorded and added to the test. To make assertions, right-click on an element and select the ones you want to add. After we complete our test, let's review our generated code. Go to the test file and see the changes made to it. It should look something like this. ` Cypress Studio will attempt to pick the best selector for the element. In this case, it was able to choose button because it is unique to the page. If there were more buttons, the selector would've been different. You can interact with elements as if you were using the page regularly. Note that Studio supports a limited set of commands: check, click, select, type, and uncheck. Let's record our second test and verify that the button will increase its count when clicked. That was quick. Let's review our generated test. ` So far, our tests have been very accurate and didn't need any modifications. However, take Studio as a helper to write tests visually and their selector as suggestions. Let's take the bottom link with the text "SvelteKit" as an example. It will generate the assertion: ` This selector is accurate, but modifying the elements' structure or order would break the tests. We don’t want tests to break for reasons that do not affect our users. A change in order does not have the same impact for the user as changing the text of a button or changing the url of a link. These selectors should be as specific as possible, but rely as less as possible on implementation details. Selecting images by its alt attribute it’s a way to find a specific element and at the same time ensure that element is accessible. (Accessibility has a direct impact on users) As a counterpart, when clicking any of the logos above, we will get very interesting selectors (and assertions). ` With these assertions, we check that our images have an alt attribute set and are tied to a specified link. Conclusion As with any other automated tool, check the output and solve any issues that you may find. Results depend on the structure of the page and Cypress Studio's ability to choose an adequate selector. Overall, this tool can still help you write complex tests with plenty of interactions, and you can later modify any selectors. Besides the selector, I found it helpful in writing the assertions. If you’re new to Cypress or e2e testing, it can be of great help to go from an idea to a working test. Reviewing these tests can be a great way to learn how these tests are built....

May 3, 2024

5 mins

CypressTesting

Reducing Fatigue for On-Call SWEs with AI, Mentorship, & More with Dr. Sally Wabha

In this episode of the Modern Web Podcast, recorded live at All Things Open in Raleigh, NC, hosts Rob Ocel and Danny Thompson sit down with Dr. Sally Wahba, Principal Software Engineer at Splunk. Dr. Wahba shares her experience tackling on-call burnout, offering insights into reducing fatigue through better observability, automation, and thoughtful team practices. The conversation also touches on mentorship and growth in the tech industry, including practical advice for junior engineers navigating the transition from academics to professional roles and tips for companies to better support new talent. Chapters 00:00:13 - Introduction to Marketing This Dot 00:01:00 - Asking for Help Effectively 00:02:21 - Reducing On-Call Fatigue 00:04:42 - Observability Best Practices 00:07:07 - Balancing Alerts and On-Call Efficiency 00:09:30 - The Role of On-Call in Modern Engineering 00:11:29 - Insights from the Grace Hopper Celebration 00:13:56 - Mentorship and Team Dynamics 00:16:14 - Rapid Changes in Technology and Adaptation 00:18:39 - Automation, Observability, and Debugging Challenges 00:21:04 - Addressing the Talent Gap and Junior Engineer Growth 00:24:00 - Closing Thoughts and Where to Learn More Follow Dr. Sally Wahba on Social Media Twitter: https://x.com/sallyky Linkedin: https://linkedin.com/in/sallywahba/ Sponsored by This Dot: thisdot.co...

Nov 27, 2024

1 min

Software EngineeringEngineering Leadership

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

State Machines using XState and Svelte (Part 1)

State Machines using XState and Svelte (Part 1)

What's a State Machine

What's XState

Our first state machine with Svelte

Statecharts

What's Next

Ignacio Falk

You might also like

Introduction to Zod for Data Validation

Learning Paths for Next.JS Developers with Ankita Kulkarni

What is Cypress Studio?

Reducing Fatigue for On-Call SWEs with AI, Mentorship, & More with Dr. Sally Wabha

Let's innovate together!

You might also like

Introduction to Zod for Data Validation

Learning Paths for Next.JS Developers with Ankita Kulkarni

What is Cypress Studio?

Reducing Fatigue for On-Call SWEs with AI, Mentorship, & More with Dr. Sally Wabha