Polyfills, Transpiling and Monkey Patching

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss.

Welcome to Syntax, the podcast with the tastiest polyfills out there. We've got a show to you for you today on polyfills, transpiling code, and monkey patching, both rid explaining what all of those things are and when you might wanna reach for 1 over the other as well as how you can rid. Polyfill and and transpile all of your code likely to support newer APIs or to support older browsers Or to get features that are just not yet in your environment.

My name is Wes Bos. I'm a developer from Canada. With me as always This is mister Scott Talinski.

How are you doing today, Scott? Hey.

I'm doing good.

Yeah. Feeling feeling fine. You know, we we, have Some family over for the holidays, the 4th July week over here.

And we've just been spending a lot of time outdoors doing doing fan stuff and and just hanging out. Been a total blast. By the way, Wes, I would like to issue a message about the last episode. We talked about Toast messages. Right? And and we both said, like, where are I said my first time hearing the word Toast was from Android, rid. Android development. Well, I found here a post that says the term toast notification was popularized by The Android operating system. Oh.

So, hey, that's maybe a good good reason why it, popped up as being the the thing that I learned it from. So I'm just, wanted to add that on from last episode.

Delicious. Oh, good. Yeah. How are you doing? How are you always ask how I'm doing, And I don't think I ever asked how you're doing. I'm doing great. I,

am up at the cottage right now. So, for anyone who's not listening, my rid has a cottage up in Barrys Bay, Ontario, which is about 4 hours north of, of where we live in Canada.

Rid. And we are we usually come up for, like, most of the summer. I have a whole office up here, and it's it's awesome. I just, like, love working from this office. I got the AC rid right now, and it's dead quiet. And I'm just trying to get the, like, video dialed in. It doesn't look very good just yet, but, I've got some stuff rid. Coming in. The Amazon here is 2 day delivery, which is, like, stone age. Yeah.

Rid. But, yeah, it's good. Having a lot of fun with the kids. Kids are enjoying swimming and whatnot, and it's just a little bit easier to have them at a school up here than back in the city.

Nice.

Yeah. For sure. Well, let's get into polyfills, in a new term. I never heard of rid. Transpiling and monkey patching. Let's get into some of these things. Do we wanna start with transpiling? Is that where we wanna go? Yeah. Let's let's maybe explain

rid What they all are real quick off the bat, and then we'll go into to each of them.

So maybe the the first one is is polyfill. The idea with the polyfill is that it will, use code. We'll use JavaScript as an example here. It will use code to rid. Add features that are not supported in an environment. So, for example, if you have flat map, And flat map is in a a property on or sorry, a method on on the all arrays.

And if you're in an environment that it doesn't yet exist rid. Or if there's, like, a new feature that has been approved, but it's not in any of the browsers yet, but you know it's going to come, You can include a polyfill in your code base, and it will modify the prototype of your JavaScript, rid in this case, an array, and it will allow you to go ahead and start using it. A pony fill, on the flip side, is the exact same thing, except Instead of actually modifying the prototype of your arrays, it is just like a function. Rid. So you would instead of having to say, like, array dot flat map or or whatever, you would just have to say flat map and pass the array into it.

Rid Yeah. I'd never heard that term before. That's, you know, I've always heard just straight up polyfill.

For any time that you're thinking, alright, I have some JavaScript feature Or CSS feature, and it's not supported.

And it's not something you can just compile in.

Polyfill is always the term that I've always heard. Rid. And I've it's interesting. I never even word pony fill has never reached my my brain here. Yeah. It doesn't doesn't get thrown around all that much. Rid I've only seen it

where sometimes there's proposals for new things. And if they're not approved yet, it doesn't Makes sense. You shouldn't be throwing that on the prototype of the different JavaScript objects because you the The kind of rule of thumb is you'd never modify the prototype unless it is something that is approved and rid It coming to all the browsers or in some of the browsers. So if that's the case, and you you know what? I just wanna I just wanna play with it right now Just to see how it works. If that's the case, then you you you reach for a pony fill. Interesting. Yeah. That's cool. Well, let's talk about transpiling. You know, we've Talked about the word transpiling on this show a number of times and,

conflating it with compiling and saying, you know, what is really truly the difference there? Well, compiling, I I've learned is is really more of a general concept for taking one Source language and transforming it into a target language. Right? So compiling is taking something and turning it into something else. Right? Yep. But transpiling is is kind of is is kind of like translating.

And that's why the the word Transpiling comes into play here. You're translating while compiling your code into something else Where, basically, they're moving it from 1 higher level programming language to another higher level programming language. Like okay.

So you have like, let's take Rust code, for example. You write Rust code. You compile it down to system code. Right? Rid. Yeah. Well, with transpiling, you're typically taking TypeScript or something like JavaScript like and compiling it to JavaScript, which is not like a a lower level language. It's still, you know, scripting language. It's still JavaScript. There's still, you know, all the JavaScript

stuff. Yes, I think it's transpiling is one high level language to another JavaScript to JavaScript, ES6 to ES5, TypeScript to JavaScript, right? Whereas compiling would be like Rust to assembly code or Something much lower level.

So let's talk about what kinds of things in JavaScript land you might want to transpile it. I guess we could talk about CSS Transpiling as well.

Transpilization.

I can't even say the word. I just tried it a couple of times before this.

That is generally done for syntax, meaning that things in JavaScript that were added Where the the code looks different, than than what it needs to be, that's where you transpile. So for the longest time, we rid I think we still do is arrow functions were added to JavaScript.

You need to transpile those to regular functions and and handle all the scoping and whatnot.

Decorators is another good example is you might want to start using them, but they're not in the JavaScript language just yet. Or There's been a proposal for pipe for the longest time. That's a new syntax. Right? It's not a new I guess it is a feature, But it's not like an array method. It's literally a syntax. Generators are is another good example when you put an asterisk after the the word function That denotes that it is a generator function, and all of TypeScript is transpiled. Right? Like, all of the different bits in TypeScript Need to be converted to JavaScript.

Most of it is stripped out, but it is still transpiled into JavaScript.

Yeah. And keep in mind that some of these the things that you do choose to transpile here, you'll probably want to make sure that they are very specifically things that have been rid approved, at least in the current syntax of them. Because even if it is just syntactical sugar, right, it's just like The class syntax. Right? It's just syntactical sugar on top of actual JavaScript features. Even if if that's all it is, You know, things can change. And if you're I know specifically with the the the pipe the pipeline operator or did they are they called pipeline operators? Is that what they're called? I think so. Mine. Or

Yeah. Pipe operator. Yeah.

Pipe operators. Maybe not pipe. Okay. No. It says pipeline. The proposal says pipeline.

So, like, the pipeline operators, there are competing visions for what it looks like In terms of how it functions, based on the actual syntax being used. And It's important to know that if you're going to transpile these things that you're picking stuff that is the winner, Unless you are committing to a rewrite down the road or a refactor down the road.

And there are some things like like decorators. You can probably We feel like the APIs for decorators aren't going to change that much, but decorators have been kind of hovering around JavaScript for 10 years now or so. And, like, I don't know. They're not in yet. So I'm choosing to not use decorators and not compile them until they're in JavaScript because I don't necessarily trust that, they'll be here in any real capacity at any given point. So, you know, just worry about what you're building on, and don't build on shaky ground. So Transpile the things that you know are coming and that you want to use that syntax today, but maybe not the things that are rid.

Yeah, it's funny that you say that because TypeScript had Deckorators, rid. And then they reimplemented the ECMA Script decorator, which is in stage 2, which is rid. Probably coming. You know? Like, once it hits stage 2, you think, ah, it's it's probably good.

But TypeScript just went full go and said, This is part of the language now. But if you had built a lot of stuff on the older decorator syntax, they're gonna still support it. But now there's, like, 2

Different ways to do decorators and it's kind of annoying. Yeah. Yeah. And and for the most part, users, if you're using them at a basic level, you don't need to worry about them Too much in that regard because they're usually just, you know,

just just an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an an I I used to use decorators a lot, actually, and I really liked using them. I reluctantly ripped them out of my application. But,

yeah, that that is one of those things where It's been iffy for a little while. Let's talk about, transpiling unsupported CSS because you can also transpile CSS. Now we've talked about We just did a whole episode on lightning CSS, but, post CSS is also something here as well that can do this where they're using these Preset ENVs or you're using lightning CSS, what you can do to transpile your CSS is for it to physically write fallbacks for you, You can write properties and can replace them with several other properties that do the same thing that what you're trying to write depending on what these properties are. And most of the time these things do need to be static because this is done at build time. Right? So it's not like you can go ham with a bunch of dynamic stuff that's Hollyfill territory.

So here, for the most part, you're doing a lot of replacing of properties. And typically, what they might do is even add a add supports rid. So that your code correctly will use only the fallback where it needs to and then use the the native valid syntax where it can.

Rid. Yeah. There's there's probably like, a good way to think about transpiling CSS is that it cannot rid Add in features that the browser doesn't support.

But if you can do the equivalent with some other CSS, rid. That's that's where transpiling comes in. We say, oh, like a block and inline is a good example. So You might say margin block, and that will give you margin left and margin right, assuming you're in a Left to right, and margin in line will give you margin top and margin bottom.

You can easily transpile that rid to to support in all the browsers. Whereas something else that's not supported at all, like container queries, Has. Yeah, exactly. Like has is a browser feature. And that's a really good example.

And it can't be transpiled And it probably can't be polyfilled either unless you were to get into some Like heavy JavaScript, which Yeah. That's true. There is a JavaScript.

Most polyfills. Right? At least the CSS ones. Kind of drastic.

Rid. Yeah. Since JavaScript is a full blown programming language, it's much easier to polyfill features, whereas rid. CSS is not like a programming language. It's pretty pretty powerful, but

at some point, there's Are you saying CSS is not a programming language? Of the Oh, boy. Here we go. Oh, no.

You know what? Les, I'm saying CSS is a programming language. You're wrong. Okay?

That's what I'm saying. When CSS has 1st was announced, I like I took a screenshot of some crazy has I built. Oh, no. It was a nth Child where I selected item 3 through 8, and it was it was the most wild selector I've ever written in my life. And I was I tweeted, like, tell me again, CSS is not a programming language. Oh, yeah. And people got riled up over that.

People get so riled up over that. And I does it make any sense to me because I would obviously say, yes, it obviously is a programming language. But number 2, I obviously do not care if somebody else Thinks that it is or isn't a programming language. It does not change my life whatsoever.

So that's basically it for transpiling CSS. Again, you're typically looking at post CSS is the most common, but lightning CSS is a new competitor and a very worthy competitor. Again, we talked a little bit about this in the lightning CSS episode. You can't do everything just by transpiling it. There's a lot of really cool new features. And actually, that's a huge bummer about some of this stuff is that a lot of the new CSS features are so dynamic, Especially when you get into CSS variable stuff. So you'll say that, oh, this this transpilation works, but not with variables, Now with the dynamic CSS variables in your Gosh, shoot.

That's the use case right

now. Polyfills are a runtime value. And polyfills essentially fill in functionality that does not exist in a specific runtime rid so that you can go ahead and use it. So, a couple good examples I have is the array methods to reversed, 2 sorted, 2 spliced, and width.

Those are 4 new. We did a whole show on this, but those are 4 new array methods that are Non mutating. You know, if you call .reverse on an array, the array itself will reverse.

And that's kind of annoying because Sometimes you want to just take a copy of the reversed array. So we have these 4 new methods That allow you to, do them. And they're not in any browsers yet, but you can include the polyfill, in on your code base. And if it doesn't exist, then the code will simply add it to the prototype of all Arrays, and you can go ahead and use it. And these are Approved so you can go ahead and start using them, right away.

A pony fill is the same thing, but

rid. It takes in the array as an argument, as we said. Oh, so yeah. So just a function you pass in the array, and then it spits out a new array. Rid You know, I I it's funny that you use these options. I really love that this stuff is coming, but it does feel like that's going to end up being rid. A gotcha in JavaScript very soon. I know this is kind of off topic, but, like, I don't know. Do you feel that way? Me, personally, it's like I I would prefer that all read. Array methods are immutable and do not change the array itself, but at the same time, we're seems like we're now just doubling up everything And saying, alright, these ones are mutable and these ones are immutable. Yeah. I guess I suppose that now will be a a little bit more clear Because yeah. Right? If you use sort and you're expecting it to not mutate like a map or something, then you'd be Yeah.

Yeah. I think you we almost need like a linting rule of, like, did you mean to use too sorted instead of or too spliced instead of splice? That's such a good idea. You can't change it. Right? Like like, you can't change how JavaScript works. And, unfortunately, some of those are, rid. Mutable. And and sometimes you do want the the mutable version of it. But a lot of times you don't want to actually reverse the entire array because the next rid that you run that. Like, if if you run reverse on an array and then you run that function again, Then it's gonna reverse it back, and you're gonna get up with these inconsistent results of being like, what the heck? How come sometimes it's not reversing? And it's because you're flip flopping it every single time that you run that function. And that's not a pure function. Right.

That is you're reaching into the array and and changing it up and that that's kind of annoying. Yeah. And we don't need to get into this anymore than this on this show because it's gonna get off the rails. But I the more I grow in programming, the less I ever want to mutate anything ever.

Rid. I'm always giving something new each time. I I I'm I've turned into one of those people simply by trying it and liking it. Yeah. But what about what about smelt Variables. You simply just update the variable and it updates itself. I guess it's probably doing the mutation under the hood For you? Yeah. I mean okay. I take that back. If I'm if I'm changing something, I would like to be something new. But If I'm like, let's say a variable is bound to, like, a form input.

Whatever that variable is, just because the text contents of it are changing, rid. The data itself isn't changing. Right? If you're reversing array an array, like, it's it's this is now the same thing, but it's now sorted Or whatever. It's not the same thing. So I think that to me is the distinction.

Like, if something if something becomes something new, which it almost always does with the right methods. Yeah. For some reason, yeah, it needs to be assigned a new new variable name. Yeah. I agree. I agree with that as well. Let's talk about polyfilling CSS. So we've talked about Transpiling CSS. And with transpiling CSS, again, you're mostly doing a string replacement or an addition where you're Statically putting in these new features, but with a poly filling in CSS, we've mentioned that, again, just like with JavaScript, The only the big difference here is you're not having to worry about prototype or anything like that because you're not modifying JavaScript code. You're trying to dynamically modify your CSS. In the polyfill CSS, JavaScript first needs to parse your CSS, Find the features, write the fallback, then inject the CSS.

And sometimes these polyfills can end up being very heavy based on what they wanna do. Rid. The polyfill for container queries worked really well, but under the hood, it used, Probably a lot of I don't know what the the tech is that it uses under the hood now, but it uses, like, resize observer and the same sort of stuff you could have written it by yourself.

But some of that code can get a little unwieldy if you're using it too much. It can run very frequently.

You're adding a ton of JavaScript to your site that Will then be running anytime CSS needs to update or repaint that kind of thing, and and you gotta worry about that.

So polyfills in CSS can end up being a little bit performance grumpy.

I'm gonna say, you know, I've used polyfills in CSS somewhat frequently. And I think as long as you know what you're getting into and you're not going overboard with them, They're they're just fine to add in some new features here and there.

In fact, we're polyfilling a few things on the new new syntax site rid. That

are HTML polyfills. Maybe we should even talk about that in this in this episode, Wes. Yeah. Yeah. Let let's talk about it. So which which is the HTML part of that you're polyfilling?

The popover API. So we're we are polyfilling the popover API, Which let me tell you how this works because popover is a really wonderful API that allows you to have not a modal, but anything that pops over. And so We're using the popover API for our select menus that pop up for sorting. I'm using the popover API for the user little user icon where you have them to log out. I'm even using the popover API for, the mobile navigation.

And the way the popover API works is that you give the thing that is popping onto the screen an attribute of popover.

You give a button a popover target that just takes a string that's an ID.

You give the thing that is the popover the ID.

And then without JavaScript, it's hidden. You click the button and the thing pops over.

Now that's really neat, But there's some key aspects. 1, it doesn't work on every browser just yet.

But the way that they can polyfill it is simply by Essentially, display nonening it and then putting it on top when whenever you click the button, and it does it via classes.

So in the popover API, it's doing it all via pseudo selectors.

But in the polyfilled version of it, All it's simply doing is adding and toggling classes to do the same thing and then giving base CSS for those classes that The browser would have then, like, instead 0, those types of things.

So it is it's really interesting, and it works really well because it's doing so little. It's essentially adding a class, Adding a click handler and then, adding some CSS.

That worked really well. Yeah. So somebody has figured out how do I replicate This browser feature with JavaScript. So you do you do load a little bit more JavaScript, but you're able to get the full rid. You're able to get the full feature without having to like, yes, you load JavaScript, but you're not actually writing any JavaScript yourself. Right? You simply just load the thing and you're good to go? Yeah. And in fact, we just load the script.

We put the the pop over attribute, and I don't even think about it. If I wanna get the only time I need to think about it is if I want to customize Some CSS stuff or Yeah. For instance, I had to get into anchoring.

So this is a whole another topic. Anchoring in is is another feature Is that now that we have popover, popover puts the new layer on what's called top layer, which exists outside of the rendering context in HTML. We should do a whole episode on this. And that what that means is that you cannot even if it's position absolute, you cannot put it inside of a relative container. Because if you say top 0, it's always going to do top 0 of the browser because it's outside of the context.

Oh, yeah.

What I needed to do was I wrote my own polyfill for Anchor because there is a polyfill for Anchor out there, but I couldn't get it to work completely in in my use case. So I wrote a Svelte action that works as a polyfill that you just say use anchor, and then it will anchor the button to a specific div. And then you can use CSS to to anchor it, whatever.

But either way, you know, these types of things it is. They it's just functionality that can be replicated with, In most cases, pretty minimal minimal JavaScript. Yeah. The if if you look at because, Miriam Suzanne is the one who did the polyfill Or a popover API.

And it's like 200 lines of JavaScript. You can read it really easily.

It it's it's not a ton of code. So, You know, these types of things are are maybe really interesting to paw through. And I'll post the link to the popover API one because it is a good, good example of what an HTML rid. Sort of polyfill might look like. I was curious if there was other

pieces of HTML that needed to be polyfilled because I didn't even think to add that to the show. I was like, yeah, there's rid Yes. I have some JavaScript polyfills, but there's 2 big ones.

Maybe not big ones, but there's 2 more that rid Need to be or had to be, at least in the past, polyfilled. Can you think of what they might have been? That that are they built into the browser now? Yeah. They're they're I'll tell you there are HTML tags that have some sort of functionality.

That were polyfilled.

I'd have to imagine, like, certain form inputs, but, I'm not gonna go there. I'm gonna go I'm gonna go with I don't know. I'm blanking. Rid Blanket details? Yeah. Details was one of them. Good.

So details is good job.

Rid You have so much obscure HTML knowledge. It's amazing.

Details was the tag where The browser gives you a little arrow, and you can click on it. And everything in the summary tag will be shown or hidden when you click on the little arrow beside it.

The other one is all the stuff around pictures. So picture fill. Right? The picture element. You're so right. That's what I've used the most. Rid. Yeah. Yeah. Me too. Like, I used to throw a picture fill into a lot of it because you can give the browser multiple sizes and it will download It will only download the one that it needs to display on the page based on how big it is and DPI and all that good stuff. And I was thinking probably also, like, loading equals lazy, rid. Is probably one that could be polyfilled. Although if the browser doesn't know about it, then it probably would just download them immediately.

So maybe you had to modify your HTML a little bit. That's always the bummer with polyfills, where if you have to modify your HTML so the rid Polyfill works, and sometimes that's the case. Right? Otherwise, the browser just behaves in a certain way.

And then web components as well is a big one. I was gonna say a new thing that we're seeing in in polyfills, especially for HTML, is just a straight up web component that does the thing. Like for instance, the select menu. Is that what it's called? Select menu polyfill.

Yeah. The select menu polyfill is a web component pretty much straight up and where they give you x So x hyphen select menu instead of using the select menu. So that way there's no collisions for some browsers.

And we use this on the syntax site just briefly because, I was experimenting with it. But, again, it's it's essentially just a a web component that handles How it would actually work in in function, and you just load it up as a straight up web component. Let's talk about how to actually transpile

and polyfill your code. Like, what Should you be using yourself? Let's talk about let's do transpiling first.

Probably the one that most people use out there is called Babble. Rid. Babble will take your code and depending on which plug ins or presets you give it, It will compile your code into whatever the equivalent is. So most likely rid Babbel is you're going to be using called something preset env, where you give it a list of the browsers you want to support. And instead of you having to figure out what all the features are, it will just say, alright, well, you're supporting these browsers And these are the features that these browsers have.

Let's make sure that we transpile it to rid That is so that it works in all of them.

TypeScript is another Yeah. Popular.

You might have heard of it. Transpiler.

Yeah.

Which is kind of a a weird thing is that now when features come to rid. JavaScript.

You have to kind of wait for TypeScript to implement them before you can go ahead and use them. If you're using TypeScript, of course, right? Rid. Yeah, totally. So like if arrow functions were not a thing today and we got arrow functions added to it, we would have to wait rid for TypeScript.

Or vice versa is maybe we get to use them early like decorators, rid because TypeScript has says, you know what? This is going to be in the language.

Let's add them to let's add them to TypeScript so people could just go ahead and start using them as 1st class citizens. Yeah.

CoffeeScript is another popular one.

Not that popular anymore, obviously, but there is Still quite a few people. There's types CoffeeScript 2 came out the other day and still has a pretty.

Rid I bet there's a lot of projects out there that are still built in CoffeeScript, and people just use it. Like, I I every now and then I talk to somebody and say, yeah. It's It's entirely built in CoffeeScript like Notion. Remember? No. Not Not Notion, Missive. The email design that I use, it's all built in CoffeeScript.

I have another one. It's Civet In here, which I've I've brought this this package up before. This I think it's called pronounced Civet, c I v e t Yes. Animal name.

This thing is wild. If you haven't if if you're out there and you're like, I really loved CoffeeScript But it just hasn't kept up and it didn't evolve.

This really truly feels like a very similar type of thing.

Rid You you can write really minimal JavaScript code and have quite a bit output.

The syntax is What you could describe as being very clean, they have things like the pipeline operator.

It is very coffee script.

It's definitely Indentation based, it is very wild. And honestly, I I would it's something the type of thing I would love, Truly love to use. But at the same time, I'm like, oh, I don't know if I I,

I don't know. This is my This is pretty wild. And of it. We talked about it. We got a bunch of people reply, say, yeah. Definitely check Civv out. But, like, this is so much more than CoffeeScript will ever be. Oh, yeah. Like, if you just go go look at or ever was,

it's wild. It's more, But it also has TypeScript, so you're you're not, like, abandoning TypeScript by using SIVIT. So yeah. It is funky. I only imagine somebody building something in SIVIT

And then them bouncing off the project and some poor dev coming along to pick up pieces.

What is this?

Yeah. Yeah. I know. Yeah.

Not that it's bad, but, like,

I can't imagine. I I think the learning curve for the civet is Extremely sharp. I passed on a project once, Wes, and it was written in meteor with Svelte or not Svelte, meteor with, stylus.

In the dev who got it was like a Python guy, and he was like, this all looks like prototyping code. What is this? And this is like, no, this is how you do it. This is this is how this is. Yeah. He was, a little like, oh, shoot. I gotta learn PubSub and Meteor. I gotta learn none rid Bracket CSS syntax, the invisible variables.

Yeah.

Oh, that's crazy.

JSX rid Transformer is technically a transpiler as well because JSX itself is A language that we write. It's not necessarily tied to React. A lot of people people think JSX is React, but there are many different rid frameworks out there that run on JSX.

And simply by using the tag based JSX syntax, rid. You can convert that into the JavaScript equivalent and then go ahead and run it.

The same thing is that you can you can use React without rid JSX.

There's like a create component API and all this good stuff, which is is pretty cool.

So JSX Is an example of another transformer. And then I guess, like, Svelte. Right? Mhmm.

Yeah. I put it in here. It because it is. It it it compiles it down to, I guess, I guess, it's still going to JavaScript, you know. So I guess you would not call that a compiler even though yeah. Yeah. Now this whole compiler, I've always called it a compiler, but it really probably it is a compiler that is accurate, but it's also probably rid

transpiler as well. Yeah. Yeah. It's the same thing as the, like, what's the difference between a programming language and a scripting language? Yeah. I know. That and a framework and a library.

Oh, yeah. You can talk till you're blue in the face about the differences between the 2, but, like, who cares, really, at the end of the day? You know? The people who care Are the people who attach their identity to it. Like, React is not a framework. Download frameworks. React is not one. Well, actually yeah. Well, actually, JSX is not a templating language even though it really is. You know?

Polyfills. How do you polyfill your code? A very popular one is Polyfill IO, and it will detect your user agent and download the necessary polyfills for that browser.

So you just throw a script tag into your rid browser, and you are good to go. It will figure out all that for you. You do need to put it is as a rid I'm pretty sure we're having the guy from Polyfill. Io, so maybe we'll talk to him about it. But I'm pretty sure it needs to be loaded before any of your JavaScript runs because if there is a feature That is necessary.

It needs to be downloaded and parsed and rendered before, you go ahead and do the rest of it. And then the other one is Core. Js. You're probably familiar,

by seeing the Core. Js guide in the job.

Yeah. When you install rid something on npm. Core. Js is often a library that's used to polyfill features in across both browsers as well as in different node environments.

Rid I just thought of a really good example of polyfilling and transpiling.

So Promises.

Right? Rid The promises, which is like new promise .then.then.catch, all of that can be polyfilled because that's rid Just an object with an API in the browsers, and promises can be polyfilled. But asyncawait Cannot be polyfilled. It must be transpiled because it is a syntax. Right? Yeah. That makes perfect sense. Right? Yeah.

Yeah. Because one of them is essentially sugar on top of an API, and the other one is an API. Exactly.

So that's a, A nice clear example of the difference between transpiling and polyfilling.

Yeah.

What about, you you have the HTML 5 shiv And e s six shim.

This is the shi whether it was a shiv or a shim was a big hot topic in web dev in 2011.

What is a shiv and what is a shim? And I still honestly don't know why they would choose the word shiv over shim. Shim makes more sense to me. I'm pretty sure ready.

If I remember correctly, and this was, like, what, probably 12 years ago. You don't need to do this anymore. But rid When we got the new, like, article and aside tags, Internet Explorer section, Internet Explorer would just, like, Puke them up, and it wouldn't render the content inside of them unless somebody figured out that, like, if you do, like, document dot create element rid. For all of the new tags, then Internet Explorer just worked great with them. And they put it out as HTML 5 shiv, And I'm pretty sure people got mad at that or said it was inappropriate because of the, like, prison rid. Stabbing ness? I'm pretty sure maybe we should look into, like, what the actual history is. But if I remember correctly, it was because people didn't like the word shiv, And they changed it to a shim, and it is the exact same code. What it's funny is that you can see

I I just I typed in HTML 5 shim because I knew that that would produce Google results about this considering that there is no HTML 5 shim Or and I don't think there is because what's funny is that there's a lot of blog posts talking with the title of HTML 5 shim, but then In the body of the post referring to it as HTML 5 shiv as it's like it was such a a topic of conversation. I found a, I found a Stack Overflow post from 10 years ago that is shim versus shiv.

It's originally called HTML 5 shiv. Shiv really isn't the right term. Shiv means stabbing and a stabbing implement.

Shim is something popping Use things to level up or to prop them up. That's entirely it. It's it's so funny. Is it shimmershev? I'll link to this. This is a great He's up. If you want a a peek into, you know, web dev drama from 20, well, 10 years ago, this shimvershiv Stack Overflow is a good little step into the past.

Should we move on to monkey patching?

Yeah. Let's talk about monkey patching. Now, monkey patching is basically the idea of taking a library and patching it or taking some any any external library code And patching it on your end without essentially having those patches move into the library itself.

And the reason why it's called monkey patching. I don't know the the proper reason why, but, rid you know, from what I read when I I was trying to Google about, like, the history of why it's called monkey passion. Because with any of these things, you have no idea if, Do you know what what the historical reason why it's called that is? And, with with monkey patching, rid They say they say it it could originate from, like, monkeying around with something. Right? You're just you're you're just tinkering with it, And that's really what it is. It's kind of like a nonpermanent or potentially permanent, but nonpermanent is in it's not Merged into the core library modification of another library.

And typically this is done by in in PNPM, you do it this way. The patch Packages are a library that does this. You do it this way. Typically, what you do is you dive into the node modules folder.

You make modifications to the code as you need them to be. Let's say here's a perfect use case for a monkey patch. In my mind, There is a library and it uses a browser feature, and you want to use this library in an SSR based context.

Well, sometimes those libraries just throw, you know, browser primitives or browser globals around.

And if Node hits it, it could get angry about that as being undefined.

So you can wrap stuff in an if statement to make sure that you are in a browser based context. You could get into that code. You add in that if statement to make sure it's running only in the browser, and then you run your patch command. And what that does is it basically generates a diff file that says on this specific line of this specific file, add or Remove these lines of code just like you would have in any sort of diff.

And then that means that anytime That that library is downloaded and reinstalled onto your computer.

The patch will then run after.

So as long as the versions are correct, It will then take that patch file and apply it and swap the lines out, remove what needs to be removed, add what need to be add in the process on your local machine as it happens and and then I I you know I personally patched a couple of packages here or there I even patched Svelte itself, and it, has never bit me in the ass.

I will say that. I'm surprised.

Yeah. Rid. Yeah. I'm surprised I've done it a couple times now, and I always stayed away for it for years. I was like, there's no way that's decent.

I've run into a couple issues where rid PMPM complains that it's been updated.

And even though the code is exactly the same, it makes me patch it again. Rid. Yeah. I'm not sure what's going on there, but it's kind of frustrating that whenever I update something, I have to, like, re patch it.

Rid And then I guess there's there's kind of like 2 ways to to monkey patch. Right? There's the patching, the literal node modules file, which is ideal in my opinion.

And then there is you can just simply overwrite the functions on a module. So many ways you could do this is you can literally reach into the prototype of a package and overwrite some values there. You could, import a package and then overwrite some of the properties on that package and then export it. And then when you want to use it, you can you'll have to manually, import it from your own File instead of the package name. But ideally, I think that you have to do, which was Scott was saying, is actually modify the node modules because Often you just wanna, like, remove a line or or 2 or add, like, an or statement in there, and you you sort of fix it Rather than having to reimplement the entire method that is inside of a function that can be pretty hairy to to do.

Yeah. I mean, that even goes along with the fact that we said don't modify the prototype earlier in this episode. Right? Yeah.

So Like that that situation to me is a little bit, you know, more mysterious because mysterious things can start happening. But, you know, pat patches specifically are rid Pretty explicit inside of your your package dot JSON file in terms of, like, what patches exist or if there's a patches folder. It's pretty easy to see what's going on in In terms of patches, and they're usually just temporary. Like, the reason I patched Svelte is because it was giving an error while I was Unmounting a component because that component still had, like, active events on it. And I just wanted to clear all that stuff out. And Svelte was never going to add That functionality in because it's not, like, necessarily right or how you'd want to do it, but I really needed this for my application.

Otherwise, the The video streaming thing that I had already in existence was not going to work. So I did it. I called it a day. It was like a one liner. It was just like an if statement modification, And that worked really well for me. But for some reason, that does not give me the ix as much as modifying like a prototype. I I can't Necessarily explain it. No. I

when I was doing some of the transcript work for the new syntax website, rid I had added a method onto the global console in Node because Mhmm. I was I was using some of the, I think local storage APIs to log the show number.

And I just wanted to be I just wanted, like, console log, But I wanted to show the show number inside the console log, and I didn't want to have to import a logging function Every single time I wanted to use it. You know, like where some of these like custom loggers, you have to import it into every file and then go ahead and use it. So rid. In my start command, I modified the global console.

And you technically could overwrite console log if you wanted to. Rid. Probably not a good idea.

So what I did is I added a console dot show or something like that. I forget what it was. It was basically, I just added my own method rid On top of that, and I think that was okay ish to do because I wasn't breaking any existing functionality.

I was just extending the console, but it could be an issue if if they ever do decide to make whatever method I use And add it to the console.

At the end of the day, it's all calculated risks, you know? Yeah.

You know, what what is the risk you're willing to take that they're not gonna add a console dot show? I I don't know. That's fine. That sounds fine to me. I'm I'm not gonna do it personally, but I don't I don't think that like, if if we're talking logically or reasonably, I don't I don't think that's that unreasonable.

But There there are a couple of genres of programmers who will flip out about the idea of of patching. Because I posted, one time, I I love patching in p n p m because it's so easy. It's baked right in. You can do it in no time. Right? I I really like this feature. And you would not believe the amount of people that responded to it being like, you never should patch anything. Like, do not patch things. I was like, well, you know, it's It's been fine for me, and I get the the reasoning about it. But there are there's definitely a genre of of programmer who will, rid really not like the idea of patching. So you might be working you might even be listening to this, hearing us talk about patching and be getting upset, and that's fine. That that's totally valid. And you might also work with somebody who, if you suggested patching, would lose their their, cool with it. It'd be like, no thanks. So just keep in mind that patching, Monkey patching, adding patches to your packages, or even modifying the prototype, is subject to,

rid. Not being everyone's cup of tea. And some people will say it's a bad practice or a code smell. So What are you supposed to do? Like, I understand that you're supposed to rid. Send a pull request and and whatever. But, like, sometimes you gotta get stuff done. Like, you you've got work to do. And, of course, you can let the author know, rid. But maybe the author won't reply for 6 months, on that specific package, and you just you need to get this thing working in 6 minutes.

So there's there's a reason why it's an extremely popular,

way to fix node modules. Yeah. And I I personally like I said, I've been my myself clear that I I don't really hate it or anything myself, but, you know, there are, I think maybe what they would want you to do instead would be to fork the package, make the modifications.

Yeah. Maybe Figure out how to build it,

The Bloop. You didn't have to do all those shit. You could just you could you would essentially just fork it and then pin the the or install from your commit.

Yeah. Rid or your your fork, you

know. One other kind of interesting thing while we're talking about this don't modify the prototype is MooTools.

Rid. Never modified the prototype. That's why everything was dollar sign, and then the methods were chained on that. Whereas MooTools modified the prototype of rid built ins, which is, like, string was was 1. And MooTools added a string dot contains method.

Rid And you could say, like, does awesome dot contains wes? It would return true. Right? And when JavaScript proposed adding a contains method, it actually was slightly different than the MuTools was 1, and it broke a lot of websites.

So they had to change it to dotincludes.

That's why if you use I think arrays have dot contains And strings have dot includes, which is so frustrating.

The the reason behind that is because of Kuromu tools modified the prototype. And that's why people are so Anti touching the prototype unless it is to literally 1 to 1 polyfill features.

Yeah. Totally.

And yeah, I get it.

You know, your little rinky dink project very well may never End up being MooTools and, you know, take over that kind of mind sharing. But it's still something to consider as being Not a great practice for various reasons. Well, I think that's it, Wes. Do you have anything else on this topic? I don't think so. I think we should get into some sick picks.

Sick rid. Picks, do you have

a sick pick for us today, Wes? I do. I've got one. This is something that the company sent me.

Rid. I've bought a bunch of Miros light switches in the past, and I don't know if they heard heard us talking about it or whatever, but Miros. They offered Miros. Yeah.

Rid. Miras is like Amazon level smart home stuff. Right? Like, they've got light switches, and rid.

I have I have one of their switches for, like, an outdoor switch to turn our Christmas lights on and off, which is really handy.

Rid and they they I don't know. About 8 months ago, they 6 months ago, they sent me their smart air purifier, which is really cool. So that it will Turn on and turn off, depending on when you want it.

It doesn't have a it doesn't measure the, like, VOCs in the air, rid. But it works super well. So when we got our gym when I put the flooring in the gym, rid. We put, like, brand new rubber flooring in the in the gym. Right? And or recycle the rubber flooring, and it it stinks a little bit like rubber. Right? And, like, that's Probably not great for you to not great for you to, what is it, to breathe in. Right?

Rid Yeah. It's actually in the gym. Right? No.

Yeah.

So I turned this thing on rid. Full blast, and I ran it for, like, 2 weeks or, like, a week or so.

And the the smell went a lot away. And then I opened it up rid and took the filter out, and the filter smelled like rubber. And I was like, man, this thing is pretty awesome. Like, it it took all of that rid Crap out of the air. And then I turned it off for a couple days, and I started smelling it again.

And now after a couple weeks, it's totally gone. But It definitely was pulling the whatever VOCs or whatever awful stuff was coming gassing off of that rid. Rubber flooring is pulling it out of the air and and filtering it out, so I was pretty pretty impressed with it. So it's the Mira Smart Wi Fi Air Purifier.

I'll I'll link it up in the show notes.

Sick.

Yeah. You know what? I have we have an air purifier or an air filter In our upstairs, in our downstairs, and then I have 1 in my office because we were getting hit with wildfires, like, a couple years ago really bad. We are getting it right now. Yeah. It seems like everybody else is getting it right now, and we're not. It it's like Colorado has always been very dry and very smoky the past couple of years. And then this year, it's like, man, we've had more rain than Seattle this summer. What is going on? It it's very wild. We've had no no wildfire smoke and just tons of rain.

I'm gonna sick pick either way, what I'm saying here is I I love air purifiers. I I think they make a big difference, overall.

What I'm gonna pick is going to be essentially just it's I think it's made of nylon is what it is. It's basically cable sleeves.

You can get cable sleeves in all different colors, sizes, lengths, and whatever.

It's very cheap, and it can make your cabling Way nicer in many instances. If you need to run more than 2 cables from 1 position to another position, Having some sort of sleeving for that cable makes it into 1 cable.

And if you get it to be like white In a you know, like, your entertainment center or something that you need to run plugs, that just hides it just a little bit more. And for me, Like, I'm running I'm running a camera here. I have 2 cables, a USB c, and a power sleeve together. I'm running another camera. I have a USB c and power sleeve together.

Running up my desk is 1 single cable that does power and my audio cables and it all if you're the type of person who likes Clean, organized, anything.

Cable sleeves are just really endlessly easy to do, and they're a cheap quick rid fixed. You can get them, again, like I said, in any length and multiple colors. I'll I'll link to the ones that I bought specifically here. But if if you go To Amazon and just do, you know, cable sleeve or cable protector or anything like that, you'll find a ton of different options for this stuff Available based on whatever you could possibly need. And it's super, super cheap, nice and clean, and it can really, In my mind, make a big difference in any sort of cabling scenario.

Yeah, I even did, the speakers that are hanging in my office rid from the ceiling.

Just the little loop that comes out of the ceiling into the speaker. I just threw a little bit of pink sleeve over it, And it looks like so much more pro.

And you can put, what's that, heat shrink on on either end. So it gives you a nice rid End on it. I didn't realize you could buy the split version, which is what you have. So because, like, I I built, like, a unit rid. A Una cable that goes from my desk to the wall, and it carries power, audio, and Ethernet, Which I realized you're not supposed to put those together, but it's fine.

And I put them all. I had to take the ends off of everything. Like, I had to, like, Like, desolder a bunch of stuff.

You you had to, like, fish them through.

Yeah. Yeah. Because, like, at a certain point, rid Like, it's kinda like those Chinese finger traps.

That's the the sort of thing. So you can, like, push them together and you can snake it through. But if you have a large head, Like a plug on something, it won't come off. So I had to, like, un like, open the power bar and and and take the whole thing off. But rid. The split version is much easier because you don't have to you literally just and then if you ever have to modify it or add something, it's not a big deal. Right? Rid. Yeah. The only, you know, the only thing is it does it is just kind of slightly obnoxious

sometimes to sleep. But once you're done, you're done. Whatever. It feels fine. Yeah. It is funny. Like, the process of getting everything into the sleeve can be a little bit annoying. So, like, getting it out, the only thing that Stinks about getting the cables out is that you have to come to terms with the fact that it it was annoying to get them in, and now you're gonna have to do it again. But no. I Like I said, I I did this all for all my cables running to my desk, and I even I did a well, I have a Ruggable, and it's not like one of the fanciest Ruggables or anything, like, as my rug for underneath my desk. I ran my cables under my rug and then I did a little knife slit and I have the 1 cable tie Sleeve running up the leg of my my table, and it just, like it's it looks so so much nicer than it did before. And With a a standing desk where it's moving up and down all the time, the last thing you want is rogue cables because I had a rogue cable send my entire desk Head over heels at some point. So,

just I'm gonna get some point. So, a really good spot to buy this stuff Very cheaply is AliExpress.

That's where I bought all of my cable stuff, but they I just look, they have the Split Stuff. It's called self closed pet expandable braided sleeve, self closing flexible insable rid. Insulated hose wire wrapped text cable sock tube.

My god.

For 1 meter is $2.47 Canadian free shipping. Yeah.

Man, I'm gonna do this. How sick would yellow look once I have all my because I'm redoing all my cables in my office right now because of All the

video gear we're doing? Yeah. Yellow would look sick. I got yellow cables for my monitors, and they like, audio 1 fourth cables.

They look very nice. I got a nice, like, braided mic cable that's, like, black and silver. I got, some of my my cameras, you know, now they're all strapped to my desk. I got reflective tape Oh. That is, like, just stick on reflective tape to put on anything that Retrudes out of my desk, and it's bright yellow. It's, like, very much our our yellow our yellow color. Just because, you know, I got kids in here. I don't want rid to worry about them banging their heads on anything. Yeah.

Sweet.

Alright. Shameless plugs westboss.com/courses for a list of all the courses that Offer is a list of all the free and paid ones.

Grab yourself a course and use coupon code syntax for $10 off.

Shamelessly plugging Century at century.

Io is the best place to capture all of your errors Whether they have hit production or not, you can make sure that you know what's going on. You have the visibility in your application. You know if things are running smoothly. They're running quickly as they should be. You can measure your user's misery score, and you can track just how many errors are hitting the user.

And, we don't want too many errors.

Sometimes it's a 1 or 2 errors kinda thing. You could see it's affecting 1 or 2 people, and you can look into it and solve those problems for them. And other times, You push an update to your application, and all of a sudden you got a 100 errors in a couple minutes here, and you gotta dive in in really quickly. Sentry has saved my bacon More times than I can count, so head on over to century, s e n t r y. Io.

Use the coupon code tasty treat, and you'll get 2 months for free. Alright. That's it. Thanks, everybody, for tuning in. Catch you later.

Peace. Peace.

Rid Head on over to syntax.fm for a full archive of all of our shows.

And don't forget to subscribe in your podcast player Or drop a review if you like this show.

Rid.