CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd

Yeah.

open a modal, tab around, submit a form

with With invokers.

You can open them. No. You can't open them with HTML, but you can close them with HTML. Soon, though, you can open them with HTML

that modal. Other things is,

Yes. Yes. So soon. I'm excited for that. You can you can close them with a form submit, which is really funny.

that's good. I I think that's good. I I my answer here has a couple more things.

implications of using dialogue a a sentence like, hello. My name is Wes Bos, comma, I love JavaScript

I talked about this stuff in my talk, so it's good good. Yeah. You go. Alright. Here's a question for TypeScript for you.

your mouse and keyboard.

dialogue boxes are rendered to the top layer, Alright. Here's my CSS question for you. Explain

And then there's backdrop.

and then I, I start typing, it's gonna or even, like, tab around, it's gonna immediately select the next thing inside of the dialogue. So that's a big one. Also, escape key by default will close that bad boy. So pnpm inherently makes it more accessible in those ways, right, giving you that that keyboard support.

Or hit escape. Hit escape, and it goes back to focusing

semantic, and accessible

versus creating a modal You can animate backdrop in, which is yeah. There's just a lot Scott of good stuff. I love backdrop. Backdrop's one Wes those things I hate implementing.

form method it is Form I think it's just dot is it just dialogue? I think it might just be dialog.

and it may not return

Yeah. But I guess Okay. No. Because that Wes in my example, and you knew that. You already even said that once.

if you were to try and add 1 to in any type, it's allowed. It's any type. If you were to try to do some string stuff, capitalize,

Write a little JavaScript to, other things.

So if you were to fetch it, split it up into sentence, versus a table with a table body and then a table row? Correct.

You you you you think you know that it's going to return a show, but what happens if What what sorry. What the question was, what's the difference, or, like, what's the downside? translate. There's 1 more? No. That you didn't say scale before. Oh, I didn't say scale. Okay. So scale, rotate, skew, and translate. I think the one that did not make it was translate.

I think that's perfect. Nice work. Beautiful. Thank you. I would say, though, here's here's a an aside before we move on to the next question. I just looked up invokers and to what the status of them are. They are available behind a flag So if I if I open a dialogue

the unknown type makes you first type narrow it down to the type before you go ahead and use it. So if if you want to add a number to it, you're not allowed to do anything with an unknown until you first type narrow, check that it is a number. And then once you're within the narrow type of a number, then you can go ahead and start doing number stuff with it. So

Because when you open a dialogue, it captures The the one that did not make it is skew. There is a scale property, a rotate property, and a translate property,

Oh, man. This one's interesting. Okay.

a show.

it will because you have to you have to get the 2 JSON. You have to are you talking about

please explain the difference between unknown and any. Describe a real world scenario where using unknown

using a generic or casting it with as sentence into individual words

the data being returned is not of that specific type? Right? You just Yeah. So the semantic or whatever. But, basically, why would you use a dialogue together

types, code running somewhere. We should I wanna have the guy on who's working on the Lady Bird browser. Yes. Me too. I think about Lady Bird all the time. Is he gonna support quirks mode? Probably not.

of But, basically, you have a read and write stream where you are issue that might happen by having by let's just say, to using it? Yeah. I don't know if will change explicitly implements the GPU or not, but I know translate,

is just telling TypeScript

So often, you'll have a function re response dot JSON it, right, one pnpm, and you are receiving it on the other. And you hope that those things are keeping up with each other.

Yes.

with the default

it literally can be any.

Because it may fail,

you will you will nail this Node, but I'm gonna ask it to you anyways because I do think this is,

No. Yeah. I don't know.

in Chrome, Safari,

would be too restrictive.

Invoker commands? Yes. There is. And it's it's so far, it's going to be mostly modal stuff. So that JS, like,

what is coming into your function and you want to do something with that value, it is almost always better to make it an unknown, conditions and memory sharing challenges when implemented to distributed in memory cache across worker processes? Which which one? So if it fails, that's not a that is not covered because that the shape of your data that has come back from the API is actually what you're expecting. So whether that's via validation step or simply just checking for the properties that are in there. It looks like looks like a duck and walks like a duck. Might be a good use case for Yeah. If you put a document into quirks mode, what would you expect to happen? different handling of percentage based measurements. Oh, yeah.

why is it not a good idea to

Node, something like that. Right? Validating your data. And then you can get those types straight out straight out of it as well. Make sure that yeah. Okay. Cool. The what I really like about, 10stack start, I was trying it out, is Are you looking for more things here?

Okay. It's because

would be safer than any,

would cover the failure of it.

the browser types for a fetch request. K. When you fetch something and then you is it puts you out of quirks mode. Right? So if you ever forget a doc type, you're gonna get a little,

narrow it down inside of your logic, and then go ahead and use it.

use the JS show on the end? Or why cannot why can't you pass a generic exclamation mark.

And there's a reason why TypeScript doesn't have that in their API.

know what is going to be passed in. And at that point, you can either say it will be of any type or it will be of an unknown type. And the thing about TypeScript is it lets you do anything with any type. Mhmm. Meaning that get another one.

asserting the return of 2 JSON?

server functions have, like, a validation middleware

you don't know.

when you have a type that is any, so you don't have to fuss with z index or fuss with, like, appending it to the end of the DOM. You can use absolute positioning without having to to worry about any of that. But then you do have to fuss with anchor positioning, which Yeah. Is not fully supported.

Oh, no. And Firefox, not Edge. That they're behind a flag in all 3 of the major, and drive.google.com

Exactly. That's what I'm talking about.

So a browser question for you, Wes. What are the differences between And, therefore, it's able to potentially,

unknown, which is almost always what you want,

just the, you know, toggle pop over or toggle whatever. Yeah. Yeah.

I even wonder if you'll be able to,

the the, the commands that are, like, stopping and starting an audio player and stuff are not involved in that. Yeah. So it is to get that eventually. Yeah. Right now, it is, I believe, what it is. We can maybe put this up on the video. I don't know why it's not pasting correctly.

good for our audience.

Do it to me.

2 uppercase on in any type, it's allowed. It's any type. With And there's different and

the fetch would just cover the happy path. Right? That the catch would,

Mhmm. You think, oh, I would just like to have a generic on j on fetch so I can tell it what what is coming back.

Incredible. They like, people didn't even know what they were a couple months ago.

Yeah. I love it. I think that's great.

where you can use XOD or something like that in it so you know that the data coming in is of the specific type. Yeah.

In TypeScript,

element that does not need to be closed. List item. And

injects a body? I I put a just a CSS quick little CSS thing where you could have,

Isn't that weird? So the unexpected behavior

that would like I'm assuming both CSS and JavaScript

This is a fun one about HTML tables, In Node. Js, when using the stream API, Process

I did not know that. That's like,

a table with a table body element and then

That Node doesn't count because I got it right. Alright. Describe the precise,

But what code would you write like, register z 0 or will change

So you don't need to close your list items, folks. No. Don't waste your time. Oh, alright.

inserts 1, meaning that the HTML that you author like, you're saying you're either slowing them down or you are blocking them entirely.

inserts a table body.

situation that will happen from writing the first one without the table body? Like, let's say you didn't write a table body. What is an unexpected situation that could arise from that? maybe? So I think you're you're close. So the site is 1 process per the website. So I would imagine that's per domain, where the origin isolation, did not respond. So I I gotta I gotta get that answer from somebody. That's deep down. Don't ask questions you don't want answers to, Scott. Exactly.

I got it.

what's the unexpected

which,

is that the browser

So if you don't have a table body, it automatically

you gotta love HTML tables.

with an immediate child as a table row and then table data verse, high memory usage such as, data chunks queuing up in memory.

Here's my actual question.

in your code. Yeah.

and expecting that to target the table row, because that's what it looks like. Wes, it'd actually be targeting the table body, which isn't in your code and does does not exist in your code, but does exist when it's rendered into the body.

So the difference between a table with an immediate table row

It's not, but it's interesting nonetheless.

child descender would work.

and lining up with the table headers.

would know about the body because the browser

What's the unexpected

Something to do with, like, call span

What is the difference and why might this cause unexpected behavior between a table

K. Let me get you a harder one. Hold on. I know that. That's one I and in fact, the moment that you said that, I I was prepping myself for that exact Wes. So I had it I had it primed. I had will change answer in my head.

This is a fun one here.

function is provided.

will have been changed.

Wes.

as the Oh. Yeah. To to Without oh, without, like, a comparer function, which is the Without a comparer function. Or the argument to Scott.

so what happens when you run than the Node can support.

first of all, mutate the array. So the original array

Oh,

like, if you do, like, 1, 2, 3, 4, 5, 6, 7 all the way up to, like, 15,

Did not know that word before. Interesting.

Node that I actually needed the other day. It has to do I guess you could name do this front end or back end. But, all of their

what JavaScript I think it's a local storage JS shared between ports to

That's another word I can't say.

API would you use if you needed to split a sentence and then just dialogue.

16 codeunits when no comparison

Let's talk about

Without a function but never I love your deductions on that. We're all pretty much dead on. So Oh, good. Thank you.

It will,

Yes. On an array of numbers?

And then custom invokers. I know that kind of defeats the purpose. No. But Give me give me that. Yeah.

characters?

order.

Nice work.

And then once once you get past the ones that start with 1, then it will go 2 more cars lined up at the stoplight into individual words my my rate limiting is

So someone gives you like, a immediate child selector. Immediate child selector? You're saying that you would assume that your direct Oh, I don't know.

and or individual So I'm assuming what happens here with streams is that you are sending data from

my understanding here would be that,

You can do either. Okay. It's most likely you're you just say, hey. You've done too many. Now Okay. Now stop. But you could also, it'll be, like, 1, 11, keep quirks mode Yeah. You can do it on a user Bos, but then, like, if they use a VPN or they, like, clear their browser or they're they're running a script from the Wes was, how do you deal with back pressure?

if you can step in there and say, wait. Hold on. 1st thing in the process is that Wes these have been coming in too fast. Let me just slow down and block them. I had to implement something like this for people spamming

you can only try 4 credit cards, per hour, per account, or whatever. So, you know, it's a you don't wanna block anybody who's legitimately accidentally entering your card wrong, but at the same time, just a version of it. That on my

a 100 milliseconds. But the 2nd time is 200 milliseconds. Yeah. So, basically, what you're gonna be doing is you have a threshold for how many requests can happen per given amount of time. And Yeah. Each time a request is coming in, you're incrementing that over that given amount of time. In that given amount of time, that the variable in memory, I suppose, in memory, is going to be storing like, you do things like omit a doc type. Would that enable quirks mode? That's exactly how you, serialization

Scott. Do you in rate limiting, do you do you prevent? Like, you say, wait. Hold on. If too many are coming through, is that what you do, or do you do you slow it down? I actually don't know.

Yeah. So rate limiting, back end things, and this one's about the streaming API. K?

This is based on a a in in fact, an informative tweet that I did on using

they're spamming stolen credit cards on the level up

that doesn't have cookies.

checkout phase. Because even if I had Captcha or all this stuff, you'd still get people who would just try a whole bunch or whatever. So I had to put a a rate limiting of you can only try

primarily It's been away for, like, 15 years. Yeah. Yeah.

But, basically, yeah, you're just not because middleware functions like it's stepping into the request process. Right? The request comes in, and then you can even augment it on the the response Scott. It's happening in the middle of that process. So

within 2 minutes, you have 50, a 100 people try sign up for it. And that's that's a problem with literally everything, but it's a problem where good people do things in the same way that bad people do things.

for rate limiting, you're checking like, if if too many requests are coming in per given amount of time, then you're going to want to

in something like it says Express JS, but in in something that has a middleware in it, Hano would be a good example.

But, yeah, that was a great answer. I like it. You you can rate limit individual users. You could rate limit every user. You could yeah.

a entire

the data is isolated to the origin. That's something like local storage. Right? It's shared amongst the second thing is that it will there is a way to communicate

it takes it into account protocol domain and port with the the z axis does Mhmm. But your your transforms onto the the GPU, which can be

opener policy or COOP,

process? Yeah. I actually posted the code. We'll we'll have the code in the in the show Node. But, basically, Let's hope not. I did see that they responded to my,

process isolation, and origin isolation in modern browsers? K. This one, I feel like,

like, the difference between multiple tabs of the same website in the same browser That's good. Yes. You're right. So CSS will change

I had no idea about that. That's that was a good one.

site isolation, enabled when are listed as will change, because the browser has to keep track of all of the things that will change. And if you have a 1,000,000,000 things that will change, then that can become a problem and can slow down your site. I do believe will change may I don't know if will change does put it on the GPU or not.

So isolation, I assuming, is translate.

I do not. Cross origin Alright. How many of these questions did you get stumped by? Do you have any questions for us in later episodes of Stump? Do you wanna look. May maybe we can get a little stumped going in the audience, and people can just post questions into the the comments. So if you have any questions, you wanna stump people you think you know something, or maybe, you wanna stump us or whatever, leave those questions down below. We would love to try to answer them. That'd be a lot of fun.

are considered to be the same site.

tabs in multiple browsers of the same thing. So I wanna say origin is domain based.

would be different.

Mhmm. And

would be, if you do not know

it can utilize the same cookies as the other subdomains, but not from Apex to

Mhmm. But but not domain.

or policy, and cross origin resource policy. I don't know any of those. Other course things for people who really wanna go nerdy into course.

Oh, yeah. That's why Wes you do something like a www.,

cross origin embed how many requests currently you have per that time. Mhmm. And then if that exceeds your limit, then you're an episode on INTL tips and tricks because that's not one that I knew.

HTTP headers Well, I guess that could be, though, because the show type from the database is gonna have different data types than what you parse from JSON. No. I'm saying, like, if you if you know what type is coming back from an API

That's a great question.

what?

multiple Wes it wasn't blending properly in Safari? So News will change.

these are not my domains,

Oh, man. Process origin.

subdomain.

and evil.co.uk, Now will change my understanding, and this could be right or wrong. I'm gonna say I don't know explicitly. I have looked this up at some point. My understanding is that will change becomes a problem if too many things

And,

Yep. And so site, the definition for that is,

Yes. Yeah. The port is an interesting one because if you have, like, a local host, things that will happen when the browser is running in quirks mode.

No.

whether or not data is accessible

Now here's an interesting one. A little bonus. Do you know the relevant

origin

sometimes

However, evil.com Chrome, Safari, and Firefox invokers. Wow.

isolation.

isolation to JSON saying this is the type of of what it is. Node to say that we don't do that, but For the fetch itself? spaces in which those things can be isolated. Right? Like an origin immediately I go to. Like, an origin is like a domain name. Right? Syntax .fm,

Process

Is is am I on the right Yeah. The right thing? Okay. You could think of it as, like, a process for the browser. Yeah. Okay.

it groups by effective top level domain.

Wes the site, I don't believe, does. Let me even confirm that site. Oh, protocol domain and port.

what quirks mode is in HTML, strategy for implementing a custom middleware Bos rate limit system IP based, where you don't

unpredictable that it is of this specific type. And, of course, we all do that in in some cases Wes, like, it's gonna be that. But the proper way would be to narrow the type and actually check

different handling of table cell sizing, a locale, so you can tell it which language it is in, but also the granularity

nonstandard CSS implementations, In TypeScript, you have a fetch request,

message in your console that says operating in quirks mode. I like how you said Node when, like, that came out in, like, 2011. Yeah. Yeah.

it should work, and other poor people have to maintain these old quirks mode. So now

Oh, that's wild that someone has to and then 22. You know? Like, it doesn't actually put them in order is what I'm trying to say. So the reason I actually I don't know if I know the reason behind this, but I'm assuming

there was older doc types. And those older doc types dictate to the browser how class at, like, a a university try to sign up. And it immediately shuts it down because will change. However, like you said, it's,

This is basically, like, before the browsers got something that looks like a character, but may be made up of multiples.

float and positioning behaviors, is that a single word or multiple words? And the answer to this is use the intl.segmenter intended to be used as a last resort because a browser already tries to do this. Yes. And there are some downsides. Like, it creates its own stacking context.

Alright.

enable quirks mode. Yes. But what does quirks mode what does quirks mode do?

And, the read stream can resume and can continue.

which APIs Yeah. Dialogue doesn't need stuff. 1st and foremost, will not match the HTML Vercel.

Quirks

and name one of the possible

mode. Quirks mode is Lexicographic in your Node. Meaning that if, let's say, you looked at the code and warp, for some reason, saying, I'll do an immediate child of the table,

That I couldn't tell you. I I know it has something to do with, The form submit is In JavaScript,

are available, but I don't know. I don't know anything about it. It's inconsistent margin and padding,

tweet about transforms that that is already supported in Lady Bird. So it seems like Lady Bird is cruising on, APIs that they've supported. Yeah. It's it's really interesting. Cool.

Alright. Explain

and, like, standardized on a lot of how these things should work,

will change opacity, will change then you can goof up the the stacking context or or background.

wanting smoother animations.

how an element is expected to change. So you could say,

in CSS? Maybe even just narrow that down to will change. What are the potential upsides and downsides

will change transform, with a div and a role of dialogue. So, like, maybe not

advantageous, especially if you're explain what back pressure is. I think that's a good enough question.

Yeah. So it's something as to be used as a last resort, and it's usually just something you just throw it in there and see if it changes. Yeah. Measure. And then if not, then maybe you wanna take that out because, there could be a possibility where you're taking in data faster than you can deal with it. And at that point, you will start to

the potential rendering benefits and downsides to using translate explicitly

hints to the browser is that Yeah. There's a get and post but I often will have, like,

I don't wanna say yes or no to that,

and it hints to the browser. Hey. This thing

because I don't know. Actually, well, I'll go for it. I'll say it does put it on the GPU.

That's right. That is right.

make it a smoother experience.

otherwise, once you is it translate? It's a hard problem to solve. But Yeah. We've I think we we did a whole show on that as well. I have one for for you, Wes.

like, blends with something that is behind an element, make everything faster, nothing is faster.

Scott position,

I think a background blur or something like that in CSS can I I I had that issue myself that's my next question. I was about to tell you, but I'm gonna I'm gonna tell you. Name an HTML

Here's an HTML question for you.

reading speed.

The question is really just explain what it is. And Yeah. Yeah. I'm assuming that's what it is. It's when there's around over here, and I'm always knocking over my stuff.

And I should say, by the way, I have no idea, but I'm I'm gonna guess what this is. Yeah. And when you TypeScript

That's way too hard. Oh, no. Can I I I I'm not gonna ask you to answer this one, but I just wanna laugh with you? In a high concurrency Node. Js application using the cluster module

example like that where, yeah, you can, like, essentially pause the stream while it is it is ready to go. I like it. Good. That was a good question. Thank you. Yeah.

that so you're pausing the read stream. And then once the write stream has been drained,

And so, basically, the way they have it as a solution here is to use

run out of memory or or something like that. So What what's what's the form submit?

explain potential race and then site isolation?

Oh, yeah. What a question. Could you imagine being in an interview and then getting that question and just be like, I don't know. Like,

almost reading purely off of a definition here. So, yes, that is correct. Back pressure occurs when the writing speed cannot keep up with the readings

That's great. Oh, cool. I I wanna make a

a, a resume and to check to make sure I haven't had to think about quirks mode in a long time. This is something I know I should know, and I'm gonna it's something I just haven't had to access in a long time in my brain. Let's think.

writing to a file as the data is coming in. Okay.

woah. Then resume the stream. Sorry. I almost knocked over my coffee. That happens a lot over here, Wes. I'm just gesticulating

when you need to do something with the data on the receiving side, like write it to file or or parse that data, If you want it to be of a specific type, like, let's say it's a syntax podcast episode, and we have a type of show that has a title and a m p three URL, all that stuff.

Wes, you're you're saying, if you can't continue, pause the read for a second. Once the write is, is ready, then translate to a property? I was actually gonna ask you this. 1 of them did not become a property. Node of them. And it's not a version of it. It's not translate three d, so to say. Oh, I was gonna say, like, translate z.

Without proper back pressure handling, this can lead to And, perhaps why does it produce this result?

So Oh, okay. So

Because it's really easy in regex to say, give me all the characters a through z, capital and lowercase. How do you use that with splitting? I never had to do that. I'm not quite sure. How do you do it, Wes?

approval to add new formatting of currencies. So intl number format allows you to

So the the idea with a a stream And I'm gonna post them here. I'll post some code that you can look at. So this is some some code about,

and some, like I don't know if it's Chinese characters or whatever, but they are multiple characters put together, and they they they appear as a single character.

format currencies, but there's, like, different ways you can format currency. Like, if it's Alright. So, yeah, split is is kinda the easiest way, and you might not run into any issues. But some, like, emojis, are multiple characters multiple languages? Like a subdomain,

and then each word into individual skew, Alright. That's it for today. Hopefully, you enjoyed that. Anything else to add, or should we wrap it up? Nothing. I got nothing.

into word, or into grapheme, Alright. I gotta

I think, Will change is an interesting property because it kind of preps the browser to know that this item will be animating.

it'd be great if we could do a a of data types,

API.

gained

Canadian, you put c a dollar sign first, Actually, I didn't know this. Restores focus to the element that opened the modal. Yep. When you click it. Node that. So if you click a button,

long, So if you're doing any, tricky things like emojis And then same thing with with words as well. You gotta think about, like, if something is dashed, is it,

format Site isolation, via the stream? Okay. So transform HTML 5 or or doc type HTML

API will allow you to specify both a characters

accounting for

Man. That you want. So you can tell it

Yeah. Yeah. You know what? I think regex is going to be involved here at some point. Obviously, you could just split with an empty space to get each word. But what, how do you use way. Yeah. How do you use regex here?

and it looks like there it's there's more flexibility added to it. Yeah. Totally. Alright. Here's a question for you on JavaScript, That Wow.

INTL stuff, extremely underutilized.

And the intlsegmenter transform. Let me think about what the possible options are. Right? You have scale.

How would I split that The difference between unknown and any in TypeScript No. Translate did make it. That was your whole your whole point. Right? a sort

I feel like there's so many little things out there that you can use that for. I I just saw yesterday that the intl.number you must be applying for a very specific type of role to get questions like that. So Yeah. Node not not anything my, UI brain can do. So The next question here is, describe a comprehensive

which is a Is is there a list of the possible not have to write JavaScript? You're right. Exactly. Yeah.

Okay. Oh, man. SKU. SKU is my favorite. Yeah. I I don't know why. And in fact, Braumas

but no SKU property. But wait.

You have rotate,

once they moved

That's great.

to use something like translate. Right? What specific

It's just rotate, skew, and translate. Right? So is it

multiple values here. Yeah. Okay. But if you did wanna just change one of them, you'd you use a variable.

Shaking the boat here. Rocking the boat.

scale, rotate, skew, That's

You're forgetting 1. I I just wanna say you're forgetting 1. Oh, okay. Let me think about this. You got and Edge.

Does so tran is there a equivalent of translate x and y CSS properties as well? Well, translate can accept,

quote tweeted my thing giving some extra context. And I replied to him saying, what's up with SKU not making the jump? And, Basically, the the end result is that the HTML in the browser does not match the HTML automatically

Do you think the one that did not make it was translate? it's because it converts them to strings to do the comparison. Is that right? That's that is absolutely correct. It so it it converts all elements to strings by default and sorts them into u t f

the translate and transform properties. So Alright. In the past, you could use transform

did not become a property is that a a tree worth barking down barking up?

translate or transform function

Hasty treat? I don't even know if we're calling these hasty treats anymore. Then this Monday Monday. On this Monday episode of Syntax, we're gonna be playing a game of Stumped, which is where we ask each other web development questions. We're gonna do 1 from front end JS, back end JS, CSS, HTML, TypeScript, browser quirks.

We're gonna do some browser history stuff. We're gonna just be asking each other these questions, and hopefully, they're advanced enough that we can stump each other and,

Welcome to Syntax on this Monday.

when you try to use the sort method to modify these?

Yeah. Sentry, amazing product, and and happy that, they're bringing the show to you today. So

on an array of numbers without

I got a question for you, Wes. We're gonna kick it off round 1 round 1 fight.

Front end JavaScript, here's your question.

a comparison function? So mail.google.com

Sign up and get 2 months for free using the coupon code tasty treat.

what is the actual behavior and output When numbers are converted to strings, obviously, 10 comes before 2. Right? Because it's in lexagraphic Man, for for 2 answers in a row, you've said you've claimed that you have no idea, and you've gotten a dead on, the table row table cell.

make each other squirm a little bit trying to get these answers. So my name is Scott Tolinski. I'm a developer from Denver. With me, as always, is Wes Bos. What's up, Wes? Hey. Excited to get stumped. These are always fun to do. Yeah. And then I'm I'm stoked for this one. I think it's gonna be really exciting. And before we get going with the game, if you are stumped by your code and bugs, well, you're gonna make sure you have a tool like Sentry on your side. That's Wes e n t r y dot I o, because it allows you to solve your bugs with pure visibility into your code base. Not only that, it helps you solve your performance issues. It helps you find the bad areas of your application, the things that are slow and that are making users upset,

buggy, all these things. And you can actually see the bugs happen as they happen for the user with a scrubbable video replay. So check it out at century.ioforward/syntax.