Jamstack Fridays with T&T | Two buddies discuss performance and personalization

hey tony what is up how are you hey tim hey week was great and i'm ready ready to rock man let's do it exactly how about we play the intro and you go into the news right after sounds good okay let's rock this is gem stack friday with tnt all right well most of the news that has happened were cloudflare developer week so many announcements happened but the one that i want to focus on is the images because we here are doing gem stack we're building fast optimized website and that's what we're interested in so images is one of the most important parts of our site let's go ahead and take a look at that so uh cloudflare announced cloudflare images so it's in beta so you can get access early access to it just go ahead and fill out the form but what they have announced is that you now are able to utilize their apis to make some changes to images so you can store different variances you can probably add some effects this is really interesting because i want to know how this will compare to something like cloud and airy and this just this is great because cloudflare just keeps adding different things uh like every i don't know every half a year there's something new again announced that's really nice take a look at that let us know what you think about it all right next one on the list i got tailwind ui they now release support for well not really support it's a their components are in the reactant view and it's supported in that so if you're familiar with tailwind ui subscription based uh library of all the different components you could get like a different html outputs now you're able to get an actual react component and view component just copy and paste and keep going with your workflow uh next is something that i wanted to cover was the faster builds on larger size on netlify on demand builders so if you have been thinking about okay incremental static generation next.js only available on versailles well now you have support on um on demand builders for netflix so it's not only on versailles but netlify also has support for that next i got on my list is a headless cms strappy i was a big fan of it because you can go different directions you can do crazy stuff there it's open source you can host it yourself and uh they announced the version 3.6 and now they're added internationalization so this tells you that there's a lot of interest in making websites that are globally available and now with all these different technologies you're able to do this all right enough with the news some interesting articles that i would like to share with you so one of the articles that i will add in the in description of the video is content aware image resizing in javascript so think about this every time we resize an image it gets all smooshed or if it's a wrong aspect ratio we have to go open some content like image editing photoshop or some sort of tool to resize make sure everything is excellently cropped and then upload it back in there or use something like cloudinary or cloudflare for now for image changes but think look at this this is a really interesting so sim gar carving algorithm um seam carving algorithm sorry about that is an ability for you to resize an image without losing or distorting in it take a look at this this is really interesting and you're able to do that with javascript so it's an i'm not going to go into details of it but really create article take a look at it and let me know if you like something like this i'll keep adding them every week that's it for me for this week if you like what i'm sharing let us know give us a thumbs up subscribe comment below what would you like to see more thank you all right one thing i forgot to mention during the news segment is that we had some great news or something that i did not share about is vue storefront summit where you were the star so tell us about it let's let let's downplay that one let's download it okay like the amc i mean it's all over twitter it's kind of fun it was true twitter kind of exploded it was fun so i was the emcee of the of the conference and i spoke also at the conference so that was also cool i spoke about personalization in e-commerce with hadley's cmss in uniform so that was kind of my ball game that was great but the thing is for this conference doing the mc was my first time ever and what i didn't realize is that if you have a two-day conference and at each day we have 10 speakers per day all half an hour and then a q a it's so much work oh my god it's it was like because the thing is i have to pay attention to all the talks because i have to moderate the chat i have to understand the talk and then i have to do q a and not ask stupid questions and introduce people and know them like so you can see i have page after page after page oh this is an empty one but like it's ridiculous so i really needed to go for it and you know what because i really you know put my foot down and say we're gonna do this it seemed like people were pretty happy with it and so i would say this was a success and not just because of me but actually because of the speakers because everybody from the mac alliance was there basically right so we had us uniform but we had contentful content stack commerce tools a whole bunch of like ampliants we had story block we had different agencies talking how they built stuff with commerce and we of course had few storefront people it was like a big party of awesome and fun so yes are all the recordings now available so they are all on youtube and you can just if you just google few storefront summit you'll probably find it nice it's nice nice yeah i saw i attended your sessions i attended some q a and you were very honest in your questions you did not hold back you just i was a little edgy sometimes because i love the mo the one i love the most is like in day two we had like five headless cmss right all with a similar story but with their angle and so i was just cheeky and say okay so what does your cms do differently than the others or what makes you stand out and then the guys from content stack said like yeah but we are the only cms doing this are we the first one doing that i'm like no you weren't let's talk about this and so but you know what they had such good answers that the q a became quite lively and really interesting and we had some feedback that sometimes the q a was actually more fun than the talk and that's not because of me it's just because these speakers know their stuff so well and i can be a bit cheeky and push to see what comes out and there wasn't it was actually it was decent i had a lot of fun doing it i'll do that again i think well you you're good at it so you sure thanks man much appreciated so talking about commerce yes let's let's why don't we take this week and talk about all the interesting stuff that we usually don't talk about when we're building these gemstack sites it's not that we forget about but we only cover those when we get into like enterprise big large projects privacy uh security and obviously personalization right how all those three play along in this gemstack world so a few days ago i learned something that facebook is now building an affiliate network into their instagram so with that this tells you that they've been blocked by apple kind of to utilize their pixel so they can be tracking people now they need to somehow utilize their platform to push that those advertisers those brands and engagement right so in jam stack now stepping back into our world yeah we have uh sites that are fast performant and everything is static when everything is static do we run into privacy issues because or how do we or no do we run into security issues because everything is ex pre-built now how do you really not right yeah we should we should well with this framework you're able to keep that dynamicism available right so it's not all static so but if you keep that dynamicism open then you have a personalization piece of it how do you communicate with your third party service or your i don't know an origin server or you have like a blazing fast website running on versailles with next and then you run lighthouse score and because it has a third-party integration your last performance is dropping oh man this is you're basically describing my life when i was at agency right i always worked on those big projects and there were also jam stack sites or like semi-dynamic ones but they were when we released them they were always super fast we had kpis it was cool and then once it's alive they start adding like tracking pixels analytics tools a b testing third party scripts all of that and like the moment you look at it like a month later your jam sex or your gemstock score listen to me your lighthouse score goes it goes down by like 50 percent you're like oh no what did they do and so all those bigger sites and maybe all other sites also they also have this all have this issue of additional chunks of stuff that are render blocking or have security issues or so what do you think how do we solve this this kind of thing it's obvious right how do you say to us i guess yeah but how about you tell us so the way you will have to do it you will have to serve that personalization as part of your site in some sort of way right so it has to be uh built a runtime then or at build time sorry it has to be it has to be generated at build time but then how do you track it because what's the purpose of personalization if you can't really see the result is it performing not performing are people clicking or a b testing how does that work um so two two pieces right build time and tracking with jam sex site and i mean it's obvious who is doing it there is one company who is able to deliver that and that's called them uniform we call them uniforms now but like it's this is this interesting bit where you can actually make something dynamic happen in a static site because of course we have hydration in javascript and if you have all information inside the system already you can do stuff on hydration right and so the first time i saw that when the guys were demoing me something like this like what is this black magic how are you not calling an api to know what to render for a user right how to a b test or how to personalize and so yeah that's just really cool so tony maybe you can can you can you kind of explain how it works in gems like to make it that dynamic how everything like fits together so the long story short is you will have to somehow deliver all of your personalization scenarios or your rules like everyone likes to call them to the cdn to that delivery place where you want to deliver from it could be a blob storage it could be a a cdn it could be whatever you like to call it in your world so you mean all the data so the data is in the bundle it's in your code right the stuff that you deliver has everything yeah correct so it has to be there it's not necessarily has to be there for you to to be able to show it right away and then your javascript will execute everything what if you could deliver something and then you can use some serverless function to rebuild that html but still serve a static page so that's where we can talk about i think in our first episode we talked with alex sheba where he explained that edge functionality and ability to serve that personalized experience okay so you took it one step further but can we maybe take it simpler like how does it work inside jam stack right because we because for us it might be normal but let me take a step at it see if if you think i'm correct right so in uniform you create this is a person that's interested in you know shopping bags or something or shoes so the intent for the user is to shop shoes so we have the information about the fact that the user wants to shop for shoes and it comes from uniform so when you build the website when you hit npm run build right or generate or something it grabs that stuff from uniform so it puts it json with that information about what the user can have as an intent into your code then you build your website and then from your cms you take let's say a component let's say a hero right and then the hero has a default version and it has one specifically for someone who wants to buy shoes right because if you go to that shoe page we now know hey this person is interested in shoes so they go back to the homepage and suddenly we show them a shoe banner rather than the default one and so how this works in jamstack is that json from uniform you have in your build and then the variations in json also from your cms are also in your build and then you use a bit of uniform magical sdk code that just matches those two together and shows you another version on hydration does that make sense i think that's how it's all neatly tied into one package because you don't need to do an api call because everything is already in your bundle yeah that's that's that's yeah that's that makes sense it's almost like i work at uniform yeah sometimes you just need to see the code so yeah for our viewers if you're interested in what tim just explained you can easily get started with our product just exactly go get your starter going and then you will see it's really simple it's very straightforward so okay so take us from the concept i just gave to the one with the edge workers or the lambda function right because what if i don't have javascript what will i see that is the magic there so so edge-based personalization starting from left to right first of all we have to set it all up make sure we map it we map our content with our intent tag in cms click publish kicks off a build and produces an html page with all of our variations that are wrapped with specific html markup that's only edge function h compute functionality will understand and edge functionality will go ahead and process that information during every request that is coming from your browser into interaction with it so you go to the home page www.com you click on developer or hero page and then now we know that you have executed that personalization drop a cookie that cookie gets uh saved in the browser next request now you're interacting with a cloudflare worker or a lambda function it's a serverless function that you're passing data to and saying okay go get me from that pre-rendered html on the left give me that hero marketer because i need to show it now and that is like 10 milliseconds super fast real easy to do if we go back home now once we render that page we can disable javascript because we now have a processed html for us if we continue doing the next next steps and the javascript is disabled yeah you can't really get new stuff because it's pro it's a final product so we personalized and we've rendered html with personalizat in well with personalization in it already does that make sense it does and i'm starting to like grasp it a bit more in my mind now because this makes sense right because imagine you're on like a super slow connection with a very cheap device you don't have javascript until you have it right or you go into the subway or something so if it's part of your html that renders you are still looking at a personalized thing and then if hydration happens it might even become better or you go to another page and we track you again but then on render in the html there is actually personalized thing and so to me edge compute it's likely going to be the future right we're going to do much more on that edge compute for sure yeah i'm i'm going to have to dive into that a bit more because you have static jam stack sides but you have edge compute to make them dynamic again and so our whole paradigm is kind of shifting and i i'm more than excited right and we're gonna have to ask a lot of complex questions later oh yeah and think think of this that you can use edge compute not just to personalize websites you can go different directions now you can go yeah iot devices you can do whatever because that's really simple stuff right whatever yeah and the the beauty is that you are personalizing what we started from our conversation is that we're personalizing a static page so we're not re-rendering everything exactly and how we're on time we're good on time i think we're good actually i think we're nearing the end of today's talk i think it's friday afternoon when we need a drink or if you don't drink you have a pineapple juice or something anything yeah so thank you tony for this lovely um extra information that you gave us um i love this kind of conversational ones it's good fun yeah you're welcome also hopefully yeah hopefully there's more questions that coming out of this and people now started to think how they can take advantage of jam stack personalization and not worry about privacy and not worry about security and exactly still able to personalize yeah yeah so feel free to reach out to uniform like this is not a marketing video which it just happens that we work in this space right so that's why we talked about it so feel free to reach out to on twitter or comments here thank you everybody for watching and i'll see you next time cheers have a good one bye good to see