Polyfills, Transpiling and Monkey Patching

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

API. So we're we are polyfilling the popover

it's hidden. You click the button and the thing pops over.

adding some CSS.

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

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, In our upstairs, in our downstairs, and then I have 1 in my office because we were getting hit with wildfires,

This browser feature

Which let me tell you how this works because popover

with JavaScript. So you do you do load a little bit more JavaScript, but you're able to get the full

display nonening it and then putting it on top when whenever you click the button, and it does it via classes.

And the way the popover API works is that you give

the mobile navigation.

You give the thing that is the popover the ID.

by

Essentially, Yeah. For sure. Well, let's get into polyfills, 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

is a really wonderful API that allows you to have Sick rid. Picks,

And then without JavaScript, I grow in programming, the less I ever want to mutate anything of another library.

API,

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.

the necessary polyfills

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?

for that browser.

and it will detect your user agent

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.

End up being MooTools an API, and the other one is an API. Exactly.

It would return true. Right?

That's why

You know, your little rinky dink project very well may never

proposed adding a contains my rid has a cottage up in Barrys Bay, Ontario, which is about 4 hours north

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.

it actually was slightly different than the MuTools was 1, and it broke a lot of websites.

And yeah, I get it.

like, does awesome dot contains wes?

Yeah. Totally.

So they had to change it Oh, that's crazy.

do you have 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.

method,

And when JavaScript

to dotincludes.

of Kuromu tools modified the prototype. And that's why people are so

and,

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, CoffeeScript is another popular one.

to the code a web component pretty much straight up and where they give you x

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 But some of that code Yeah.

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 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

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.

There is a library and it uses

Well, sometimes those libraries just throw,

it,

and

a browser feature, and you want to use this library in an SSR based context.

So as long as the versions are correct, The patch will then run after.

as it happens

rid. Add features that are not supported in an environment. So,

for example, if you have

it will,

or or whatever, you would just have to say flat map and pass the array into it.

it is just like a function. Rid. So you would instead of having to say, like, array dot flat map Rid. Yeah. There's there's probably pet expandable braided sleeve, self closing flexible insable and polyfilling.

of the array itself

use code. We'll use JavaScript as an example here. It will use code to So that's a, Welcome to Syntax, the podcast with the tastiest polyfills out there. We've got a show to you for you today on

You can include a polyfill in your code base, and it will modify the prototype the ECMA Script decorator, which is in stage 2,

is that Rid. I've bought a bunch of Miros features come to 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 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 but and polyfill your code. Like, what Should you be using yourself? like, what, probably 12 years ago. You don't need to do this anymore. But rid When we got the new, like, article and

or an air filter

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, good example of what an HTML yeah, that that is one of those things where But the way that they can polyfill it is simply they're

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,

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.

You you had to, like, fish them through.

overall.

Cable sleeves are just really endlessly but, At the end of the day, it's all calculated risks, you know? Yeah.

basically cable sleeves.

lengths, and whatever.

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.

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,

Running up my desk is 1 single cable that does power and my audio cables and

You can get cable sleeves in all different colors, sizes,

easy to do,

Having some sort of sleeving for that cable

rid Like, it's kinda like those Chinese finger traps.

is what it is. It's

And you can put,

threw a little bit of pink sleeve over it, And it looks like so much more pro.

super cheap, nice and clean, and it can really, by seeing the Core. Js guide in the job.

audio, and Ethernet, Which I realized you're not supposed to put those together, but it's fine.

in many instances. If you need to run more than 2 cables from 1 position to another position,

it all if you're the type of person who likes Clean, organized, anything.

and you can snake it through. But if you have a large head, Like a plug on something, 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? Yeah. Pipe operator. Yeah.

Yeah. You know what? I have we have an air purifier 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 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, at some point, there's Are you saying CSS is not a programming language? Of the Oh, boy. Here we go. Oh, no.

makes it into 1 cable.

Just the little loop that comes out of the ceiling into the speaker. I just back in the city.

I think it's made of nylon This really truly feels like a very similar type of thing.

Yeah, I even did,

Yeah. Yeah. Because, like, at a certain point, A very popular one is Polyfill IO, 1 to 1 polyfill features.

What I'm gonna pick is going to be essentially just it's

Way nicer

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,

whereas

Yeah. That's true. There is a JavaScript.

polyfilled either unless you were to get into some

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,

And it probably can't be

do not care if somebody else Thinks that it is or isn't a programming language. It does not change my life whatsoever.

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

Like heavy JavaScript, which

I took a screenshot of some crazy

Rid. Yeah. Since JavaScript is a full blown programming language, it's much easier to polyfill features,

Especially when you get into CSS variable stuff. So you'll say that, oh, this this transpilation works, but not with variables,

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 In fact, we're polyfilling a few things on the new new syntax site rid. That with with monkey patching, That were polyfilled.

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, you can go ham with a bunch of dynamic stuff that's Hollyfill territory.

you know, these types of things it is. They it's just functionality that can be replicated with, In most cases, pretty minimal

Or a popover API.

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

even if it's position absolute,

What I needed to do was I wrote my own polyfill for Anchor And, we don't want too many errors.

But either way,

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.

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.

in there, and you you sort of fix it Rather than having to reimplement the entire

I've run into a couple issues where Transpiling as well.

in my opinion.

this episode. Right? Yeah.

import a package

Often you just wanna, like,

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

Yeah. I mean, that even goes along with the fact that we said don't modify the prototype earlier in In my mind, make a big difference in any sort of cabling scenario.

And even though the code is exactly the same, it makes me patch it again. Rid. Yeah. I'm not sure

file, which is ideal yet, but,

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 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.

are

I think that you have to do, which was Scott was saying, is actually

you'll have to manually, rid because TypeScript has says, you know what? This is going to be in the language.

method that is inside of a function that can be pretty hairy to to do.

on a module. So

statement a syntax. Generators are is another good example when you put an asterisk after the the word function

import it from your own File instead of the package name. But ideally,

and then overwrite some of the properties on that package and then export it. And then when you want to use it, you can

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

the

functions

update something, I have to, like, re patch it.

is because it was Miriam Suzanne is the one who did the polyfill

That functionality in because it's not, like, necessarily

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 JavaScript code. You're trying to dynamically modify your CSS. In the polyfill

and overwrite some values there. You could,

rid JSX.

A language that we write. It's not necessarily tied to React. A lot of people people think JSX

API and all this good stuff, which is is pretty cool.

rid. You can convert that into the JavaScript equivalent and then go ahead and run it.

on JSX.

And simply by using the tag based JSX syntax,

There's like a create component 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.

The same thing is that you can you can use React without Cannot be polyfilled. It must be transpiled because it is a syntax. Right? Yeah. That makes perfect sense. Right? Yeah.

am up at the cottage right now. So, So JSX Is an example of another transformer. And then I guess, like, Svelte. Right? Mhmm.

Toast messages. Right? And and we both said,

I've got some stuff rid. Coming in. The Amazon here is 2 day delivery, which is, like,

a message about the last episode. We talked about So decorators have been kind of hovering around JavaScript for 10 years now or so. And, like,

The Android operating system. Oh.

like, where are I said my first time hearing the word Toast was from Android,

stone age. Yeah.

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.

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

This thing is wild. If you haven't if if you're out there and you're like, I really loved CoffeeScript

most likely

and still has a pretty.

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

TypeScript is another

v e t Yes. Animal name.

I have another one. It's Civet the winner,

than CoffeeScript

Which is kind of a a weird thing is that now when

in CoffeeScript, with an API Transpilization.

Probably the one that most people use out there is called Babble. Rid. Babble will take your code Canadian free shipping. Yeah.

rid for TypeScript.

and depending on which plug ins or presets you give it, It will compile your code into and then you run that function again, Then it's gonna reverse it back, and you're gonna get up with these inconsistent results

Not that popular anymore, obviously, but mad at that or said it was inappropriate

these are the features that these browsers have.

rid Babbel is you're going to be using called something preset env, ish to do because I wasn't breaking any existing functionality.

And of, of where we live in Canada.

Indentation based,

Or vice versa is maybe we get to use them early And I'm pretty sure people got

It's definitely 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 And if Node hits it, it could get angry about that as being undefined.

Yeah. Popular.

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

In here, which I've I've brought this this package up before. This you're typically taking

are, it will just say, alright, well, you're supporting these browsers 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.

But it just hasn't kept up and it didn't evolve.

Yeah.

will ever be. Oh, yeah. Like, if you just go go look at or ever was,

You might have heard of it. Transpiler.

I think it's called pronounced Civet, c I

there is Still quite a few people. There's types CoffeeScript 2 came out the other day Internet Explorer section, Internet Explorer would just, like,

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

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 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.

because you the The kind of rule of thumb is you'd never modify the prototype with polyfills, a couple good examples I have is the array methods to reversed, 2 sorted, 2 spliced, and width.

where sometimes there's proposals for new things. And on that specific package, and you just you need to get this thing working in 6 minutes.

unless it is something that is whatever the equivalent is. So rid PMPM complains that it's been updated.

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

closed My god.

rid. Insulated hose wire wrapped text cable sock tube.

All the Decorators is another good example is

That's where I bought all of my cable stuff, but they I just look, they have 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.

Very cheaply is AliExpress.

They look very nice. I got a nice, like, braided mic cable that's, like, black and silver. I got, has never bit me in the ass.

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

just I'm gonna get some point. So, what's going on there, but it's kind of frustrating that whenever I

to buy this stuff

Alright. Shameless plugs westboss.com/courses okay

some of my my cameras, you know, now they're all strapped to my desk. I got reflective

tie Yeah. Let's talk about monkey patching. Now,

tape 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 The only the big difference here is you're not having to worry about prototype or anything like that because you're not modifying right or how you'd want to do it, but I really needed this for my application.

a really good spot

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.

For 1 meter is $2.47

Sweet.

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,

Split Stuff. It's called self

So I modify the node modules because

was pulling the whatever

depending on if you use I think arrays have dot contains And strings have dot includes, which is so frustrating.

And now after a couple weeks, it's totally gone. But

Yeah.

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

Rid and they they I don't know. About 8 months ago, they 6 months ago, they sent me their smart and download

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

when you want it.

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.

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 How are you doing today, Scott? Hey.

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

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.

Turn on and turn off,

our gym You can easily transpile that rid to to support in all the browsers. Whereas something else that's not supported at all, like 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.

what is it, to breathe in. Right?

air purifier,

smart home stuff. Right? Like, they've got light switches, and rid.

I have I have one of their switches for,

Rid. Miras is like

like, an outdoor switch to turn our Christmas lights on and off, which is really handy.

It definitely flat map, And flat map is in a a property on or sorry, a method on on the all arrays.

level

which is really cool. So that it will

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

Need to be converted to JavaScript.

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

Where the the code looks different, itself is

I guess it is a feature, But it's not like an array method. It's literally remove a line or or 2 or add, like, an or 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.

That is generally done for syntax, meaning that

things in JavaScript that were added

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

and all of TypeScript is transpiled. Right? Like, all of the different bits in TypeScript

That denotes that it is a generator function,

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

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 rid. Android development. Well, I found here a post that says the term toast notification was popularized ever.

of being like, what the heck? How come sometimes it's not reversing?

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 as you need them to be. Let's say here's a perfect use case for a monkey patch. In my mind, stylus.

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 But TypeScript just went full go and said,

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,

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.

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, Rid Yeah. I'd never heard that term before. That's, you know, I've always heard just straight up polyfill.

programming language to another higher level programming language. Like okay.

TypeScript to JavaScript, right? Whereas compiling would be 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.

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

comes into play here. You're translating You know what? Les, I'm saying CSS is a programming language. You're wrong. Okay?

like JavaScript like and compiling it to It is very coffee script.

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

TypeScript or something

while compiling your code into something else

is

one high level language to another CSS is not a programming language. Oh, yeah. And people got riled up over that.

like Rust to assembly code or Something much lower level.

is kind of is is kind of like translating.

Where, basically,

concept for taking one 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.

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,

So you have

all the JavaScript you know, browser primitives or browser globals around.

moving it from 1 higher level

And that's why the the word Transpiling

So there's there's a reason why it's an extremely popular, That's what I'm saying. When CSS has 1st was announced, I like

Yeah. Rid or your your fork, you

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.

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

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, 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

So x hyphen select menu instead of using the select menu. So that way there's no collisions

that have some sort of functionality.

like, That allow you to, rid. CSS is not like a programming language. It's pretty pretty powerful, but

I'm gonna go with or potentially permanent, but 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 thing that is popping onto the screen an attribute of popover.

I don't know. I'm blanking. Rid Blanket details? Yeah. Details was one of them. Good.

if you have to modify your HTML so the rid Polyfill works,

for some browsers.

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

rid. Is probably one that could be polyfilled. Although

if the browser doesn't know about it, then it probably for anyone who's not listening,

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 we use this on the syntax site just briefly because,

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

So details is good job.

sometimes that's the case. Right? Otherwise, the browser just behaves in a certain way.

multiple sizes

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 I will say that. I'm surprised.

I'd have to imagine,

loading equals lazy, 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.

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.

Yeah. The select menu polyfill is

and

So maybe you had to modify your HTML a little bit. That's always the bummer

the select menu. Is that what it's called? Select

Maybe not big ones, but there's 2 more that JavaScript to JavaScript, ES6 to ES5, 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,

polyfill.

and it will download

menu

to display on the page based on how big it is and

like, certain form inputs, but, I'm not gonna go there. I'm gonna go

would just download them immediately.

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

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

modified

the global console.

rid. In my start command, I

when I was doing some of the transcript work for the new syntax website, And it can't be transpiled 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, Rid I bet there's a lot of projects out there that are still built

the console,

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 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 The the reason behind that is because

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 DPI and all that good stuff. And I was thinking probably also, 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.

I was

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 where 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,

rid On top of that, and I think that was

just extending

I think local storage APIs to log the show number.

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

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 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,

operator or did they are they called pipeline operators? Is that what they're called? I think so. Mine. Or

You know, things can change. And if you're I know specifically with the the the pipe the pipeline

Yeah. Because one of them is essentially sugar on top of Now that's really neat, But there's some key aspects. 1, it doesn't work on every browser just yet.

What is a shiv and what is a shim?

prison

rid. For all of the new tags, And then there is you can just simply overwrite

all of that can be polyfilled actually modifying the prototype of your arrays, Most of it is stripped out, but it is still

Right? Rid The promises, which is like new promise Rid.

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

And e s six shim.

If I remember correctly, and this was,

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

you you have the HTML 5 shiv 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 minimal JavaScript. Yeah. The if if you look at because, that they are very specifically things that have been rid

people didn't like the word shiv,

aside tags, many ways you could do this is you can literally reach into the prototype of a package

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

.then.then.catch,

just worked great with them. And they put it out as HTML 5 shiv,

A nice clear example of the difference between transpiling

in the browsers, and promises can be polyfilled. But That worked really well. Yeah. So somebody has figured out how do I replicate like decorators, Instead of stuff. Yes, I think it's transpiling is

because that's rid Just an object

And they changed it to a shim, and it is the exact same code. What it's funny is that you can see

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 browser, and you are good to go. It will figure out all that for you. You do need to put it is as a

It needs to be downloaded and parsed and rendered before, because of the, like,

Yeah. When you install rid

So you just throw a script tag into your

Rid I just thought of a really good example of that. Like, if if you run reverse on an array

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.

you go ahead and do the rest of it. And then the other one is Core. Js. You're probably familiar,

Nice.

So maybe the the first one is is polyfill. The idea with the polyfill which is rid. Probably coming. You know? Like, once it hits stage 2, you think, ah, it's it's probably good.

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

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. 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

So Promises.

and transpiling.

polyfilling Amazon then Internet Explorer Let's talk about let's do transpiling first.

rid. That's that's where transpiling comes in. We say, oh, like a block and inline is a good example. So

like, a good way to think about transpiling CSS is that 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

But if you can do the equivalent

with some other CSS,

rid. So that your code correctly

container queries, Non mutating. You know, if you call .reverse on an array, rid I had added a method onto the global console in Node because Mhmm. I was I was using some of the, Anti touching the prototype unless it is to literally

You might say It will only download the one that it needs or, like, a week or so.

rid Add in features that the browser doesn't support.

Has. Yeah, exactly. Like has is a browser feature. And that's a really good example.

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.

will use only the fallback where it needs to and then use the the native valid syntax where it can.

You make modifications

nonpermanent is in it's not Merged into the core library

And the reason why

it's called monkey patching. I don't know the the proper reason why,

modification

Do you know what what the historical reason why it's called that is? And,

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

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.

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, for a full archive of all of our shows.

And then them bouncing off the project and some poor dev coming along

Yeah.

to pick up pieces.

Yeah. Yeah. I know. Yeah.

What is this?

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

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 And then that means that anytime

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

or not Svelte, meteor with,

none

Not that it's bad, but, like,

Because yeah. Right? If you use sort and you're

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?

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

not mutate like a map or something, then you'd be Yeah.

expecting it to worked really well, but under the hood, it used,

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 by

Shamelessly plugging Century at century.

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

for a list of all the courses that Offer is a list of all the free and paid ones.

how it functions,

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,

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,

that if you're going to transpile these things that you're picking stuff that is that does not give me the ix as much as modifying like a prototype. I I can't Necessarily explain it. No. I It's very cheap, and it can make your cabling

down the road or a refactor down the road.

It's been iffy

Unless you are committing to a rewrite Now with the dynamic CSS variables in your Gosh, shoot.

rid. And then they reimplemented 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, JSX rid Transformer is technically a

visions for what it looks like In terms of

So, like, the pipeline operators, there are competing

It's important to know The syntax is What you could describe as being very clean, they have things like the pipeline operator.

based on the actual syntax being used. And

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 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, and and then I I you know I personally patched a couple of packages here or there I even patched Svelte itself, Find the features, write the fallback, then inject the CSS.

Yeah, it's funny that Missive. The email design that I use, it's all built in CoffeeScript.

had Deckorators, 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

they're gonna still support it. But now there's, like, 2 turned this thing on rid. Full blast, and I ran it for, like, 2 weeks

but maybe not the things that are rid. Sort of polyfill might look like. I was curious if there was other and patching it or taking some any any external library code What about, rid.

This is part of the language now. But if you had built a lot of stuff on the older decorator syntax,

is subject to,

But There there are a couple of genres of programmers 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,

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

one time, a nonpermanent 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

who will flip out about the idea of of patching. Because I posted,

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, transpiler as well because JSX not great for you to,

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,

about it. But there are there's definitely a genre of of programmer who will, 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

Monkey patching, adding patches to your packages, or even modifying the prototype,

you never

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, 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,

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 That that library is downloaded and reinstalled onto your computer.

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.

that does not exist in a specific runtime

That's the use case right is the best place to capture all of your errors

now. Polyfills

right away.

Sometimes you want to just take a copy My name is Wes Bos. I'm a developer from Canada. With me as always This is mister Scott Talinski.

Those are 4 new. We did a whole show on this, but those are 4 new array methods that are approved the speakers that are hanging in my office rid from the ceiling.

do them. And they're not in any browsers yet, but you can include the polyfill, it cannot is React, but there are many different rid frameworks out there that run

value. And polyfills essentially fill in

rid so that you can go ahead and use it. So,

of the reversed array. So we have these 4 new methods rid. JavaScript.

functionality

in on your code base. And if it doesn't exist,

are a runtime That's the the sort of thing. So you can, like, push them together Let's make sure that we transpile it to rid That is so that it works in all of them.

And that's kind of annoying because asyncawait you say that because TypeScript

A pony fill is the same thing, but

will reverse.

the idea of taking a library rid Bracket CSS syntax, the invisible variables.

step into the past.

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,

patches move into 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.

monkey patching is basically into, 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,

Should we move on to monkey patching? and

Stack Overflow is a good little

well, 10 years ago, this shimvershiv

It's originally called

I found a Stack Overflow post from 10 years ago that is shim versus shiv.

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

And patching it on your end And it's not something you can just compile in.

without essentially having those 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,

the library itself.

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?

you know, web dev drama from 20, 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

I'll link to this. This is a great He's up. If you want a a peek

Rid Head on over to syntax.fm Sick.

And don't forget to subscribe in your podcast player

Peace. Peace.

Or drop a review if you like this show.

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.

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.

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

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, My name is Scott.

CSS, JavaScript first needs to parse your CSS, can get a little unwieldy if you're using it too much. It can run very frequently.

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

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.

And sometimes these polyfills can end up being very heavy based on what they wanna do. Rid. The polyfill for container queries

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.

I'm gonna say, you know, I've used polyfills in CSS

can end up I was experimenting with it. But, again, it's it's essentially just a a web component that handles 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,

The popover

grumpy.

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.

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?

So polyfills in CSS Some CSS stuff or Yeah. For instance, I had to get into anchoring.

being a little bit performance

polyfills,

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.

the The video streaming thing that I had already in existence was not going to work. So

Otherwise,

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, 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,