Learn how Finsweet Attributes are created, live coding with Alex!

[Applause] [Music] that's sweet yeah that's F sweet hello everyone good to see all how how is everyone doing we are here another Friday and doing a live stream on YouTube I'm excited about this great I'm going to say hi to a few people before we're starting you know the drill we're going to wait a couple minutes and then we'll just just jump right into it because today I think that people are interested in this there's a lot of people looking forward to learning about attributes how they are built how can you potentially in the future contribute to attributes and I'm going to talk about that in a second so please uh let me say hi first see some people here already hey Yassin hey Demetrius hey elen hey Leon nice good to see you guys great I see also Josh good to see you driving home and listening to you oh wow I feel very don't know the word happy about this I don't deserve it thank you hey Chris happy happy to have you here guys nice Hey Thomas hey bullshark what's your name bullshark bullshark creative how should I call you there's always a lot of people using some agency name and then I feel bad because I don't really know your name I call you by the agency name hey Fred hey Georgie thank you guys for coming much prefer the live YouTube uh streams oh yeah because everyone can come there their f s is back oh yeah look at this Oh wrong side we got a a cool t-shirt by the way we've got a merch store I don't know if you know that but Vite has some merch store I think it's stores of f.com or merge.com I actually don't remember but we have a look at this cool merch store bullshark creative is AKA uh shet shenet topping AKA Mel the API okay I'm gonna take your word for that nice working at Client First project right now nice Georgie you should share that on Twitter with the community great let's rock and roll yeah super charge absolutely let's rock and roll okay great so first first of all before we starting again thank you everyone for coming I appreciate it a a lot I'm gonna take one minute to to just do some um free marketing of fin Suite because um it's been a while that we just stream but we never talk about the agency so um I appreciate everyone coming and you know that all these live streams are made possible by finu finite is uh the our waffle exclusive agency we work on three different things we work on you know agency clients to build things with wlow we work on product to create products for wlow and then we work on community so please if you have some time and you want to Deep dive into what finu offers like everything that you can learn and know and interact with at finite please give a look to the links that Gab is sharing right now in the chat I appreciate it a lot thank you guys great okay so today we are talking about attributes if we can screen share please gave great so um I see a bunch of people here so I'm I'm assuming that you came um because most of you know about attributes right now there's a fairly popular project called attributes by finite okay and this is the current version the version that you you can right now visit and use and in fins.com attributes okay this project is used quite a lot we've got some solutions here that are used by millions of users there are many many many sites with a lot of traffic that are using these Solutions and thanks to this Library a lot of people was able to implement functionalities on the weo sites but without having to code by just using attributes that's the name of the library attri rutes will allow you to implement functionalities on your webflow site by just adding HTML attributes to your elements so let me show you how the current Library works okay not the upcoming library but imagine that I want to do something like um let's do mirror clicking right now fairly simple example and in here I want to mirror clicks between two buttons so when I click on this button I'm clicking on this right arrow here okay so usually you would do JavaScript but in this case when using attributes all we're doing is we're slapping a script tag on the page and then we're just identifying Elements by using some um HTML attributes like you can see here we select the element on webflow we add some attributes and that's it plug and play you publish it and everything works okay and I'm pretty sure that most of you already know this so I'm not going to bore you about this today's live stream is to talk about attributes V2 okay and before moving on I just want to clarify this is not an official launch I am not doing the official launch where I present you attributes V2 so everyone can start using it this is kind of like a um pre- launch video where I'm talking about how attributes V2 is built and I'm going to build one extra one solution live with you guys okay because the plan with attributes V2 is to open source it the codebase that we have for attributes V2 we are working on it we're preparing it so we are going to open source and everyone will be able to interact with the library so you'll be able to fix any bugs if there's any you'll be able to create no Solutions you'll be able to um interact with our team to you know Define new Solutions or propose new functionalities or changes additions removals whatever so you'll be able to just contribute to the library that's why we want to make it open source so it's a community effort always Le lead by finite we are still going to be working on the library but we want to allow people from the community to be involved in it okay so that's coming soon we're going to be open sourcing it soon but I want to start showing things to you okay so I'm going to explain how attributes V2 Works what are the differences between V1 and V2 and how you can Implement one functionality one new solution with V2 once we open source it okay let me check the chat one second if I'm missing anything here hey San hello does anybody know if we can show only text that are present on the page we're going to add that later kind of a relevant question if I have some time the mates we'll go off topic but for now I'm going to focus on attributes V two great okay so um I've got a lot of things to do in just 50 minutes so first of all let me start by just explaining how attributes V2 Works in difference to attributes V1 okay so usually when we have a page here this is our webflow side and let's imagine that we have some elements on place in here I'm going to just do like this we've got a bunch of elements or maybe I can do this blah blah blah let's make this bigger actually something like that so this is my coolage with my always fresh and cool designs and usually what you would do to implement a solution let's take this example in here mirror click events you would usually grab this script tag and you would pay it put it on the page so you would come in this page and you would just add this let me make this very small like that so imagine that this goes in the page head okay so this would go in the page head and essentially if you have a lot of solutions you would add one single script teag for each solution so mirror click it's a solution CMS filter it's a solution CMS nesting is the solution uh I don't know R TXS is a solution accordians are solution Etc okay so essentially you would end up with a lot of script tags like this one script tag being each of the solutions okay and well and essentially in here you would comment on the elements you would do something like uh FS mirror click element equals to Target whatever you you define the settings just using attributes okay this bit is not changing there's just a few changes but I'll talk about them later but what's mainly changing one of the biggest changes that we do is that there's now only one script tag for everything okay one single thing that works for all the solutions I don't know what's the fusal name of it I don't know if we're calling it Global script tag the main script tag the universal script tag honestly this is a thing of um or my team um but Vincent if you're here in the chat uh please shed some light here but I think that um I'm just going to call it the the main script okay and this script it's going to be a type of module like that okay and the script it will not be specific to one solution it will be specific to all the solutions like that okay so we've had a single script tag and what this script tag does is first of all it loads the main script and then what happens is that the main script DET Texs what Solutions are in the page okay there's two ways of doing that one is just doing the auto mode and essentially this will scan uh elements on the page to find out the solutions that's not the default because it's not the the most performant okay the default and the most performant is the other option and it's that it scans it scans the script tag to find the solutions okay like that I'll I'll tell you the difference now but essentially this main script just it's an entry point and this main script defines things like the public API defines well has the logic for importing Solutions running Solutions destroying Solutions Etc okay typo so this main script is the one that it's managing kind of like the the the master the the one who's moving all the strings and this what we'll do first of all when the page loads is it will find out the the solutions either one way or the other I'll show you how the script Tech thing works and then it will dynamically import only the solutions that are used okay so if on one page you just have let's imagine that us just use filtering or you just use U models or you just use whatever solution it's just going to import the JavaScript necessary for that specific solution okay so essentially we are breaking down all the solutions into modules and we are dynamically importing those Solutions and that's why this main script it's a type module in case that you wonder this actually help us simplify a lot of things okay because previously when we had a lot of scripts going on script Tex for each solution we had to play we had to do some shenanigan magic to make sure that all the script Texs work together and that there is no uh rates conditions Etc but with this approach it doesn't matter because everything is handled by just one single entry point and that simplifies a lot of things okay also it makes us um um it allows us to allow more solutions to be dynamically imported during run time for example Etc there are a lot of benefits here but essentially this is the the way that it works okay so I'm going to start by showing you this and then we can start you know using a solution let me check the comments when second here uh Alex I still remember the day that you introduced us to Dynamic Imports already kicking something with that as we said at the time it's time yeah yeah so we use Dynamic Imports here with attributes correct great okay so here's the codebase okay it's not public but uh we can just share it already Okay this is a monor repo and in this monor repo essentially we've got a lot of packages okay so you can see that if we got packages for uh accessibility accordians audio video before after calendar event code highight like all the solutions are just packages in this monoo and because essentially thanks to this monoo setup with a lot of packages we can dynamically import the solutions when we need them okay so these Solutions each of these Solutions it's completely uh contained so it's completely just independent which could potentially be used as a standalone solution potentially um so this it makes it also very good for open sourcing because we can have a lot of people working on different solutions that will not affect all other Solutions because each single package here it's completely independent although we have ways to connect them talk about that if I have time but yeah that's the the main idea okay I assume someone will make a jet boost alternative based on open source attributes code well let's hope that does not that doesn't happen but um you know the the main reason why we are open sourcing this is because it's a fit product we do it for the community so we want to make it collaborative okay and we really don't care if people can see the code like doesn't matter the thing is that if the the code works we can just make it work for everyone in the community then that's a good solution no need to build any paid product on top of it great okay so how about we Deep dive into the solutions um what I'm thinking because instead of you know giving you a lot of information here I think that with this little info you have enough um how about I start building a solution so I can explain things better while I'm coding one solution okay what do you think about that I will appreciate it if you give me a thumbs up because then I can know that you know people are following or if you have any questions just drop them in the chat I have here my chat I can see it okay but um let's go nice great so what I want to do is I'm going to create one solution that it's been uh asked for some people in the community okay and this solution it's the uh date formatting Sol ition okay essentially when you work in CMS in wlow so actually let me create a new page let me do by the way we manage all the all the solutions directly in wlow that's why we uh that's why we could for we flow um let me find let me duplicate this one okay I'm going to call this date like that and I'm going to get get rid of everything that it's not this everything goes away everything goes away I don't care about this I don't care about this great format dates in WAFF flow okay so when you're working with a CMS collection in WAFF flow so let's add some CMS oh oh my god when we do other thing that I have here projects and here I add some what am I doing why is this hidden nice here great so imagine that we add some date I'm going to do I think that I had here some element that had a date like create it on in wlow you've got some ways of formatting things so for example I think that here yeah we can choose the format like that and there's quite a lot of formats it's completely fine but it's it still does not have all the controls that you could have with JavaScript so imagine that you want to um mention a week week of the day with language like I want to say Wednesday or I want to say Mes in Spanish or maybe you just want to grb some date and just explain it with text or I don't know like there are many things or maybe you want to format some date that it's not inside a CMS collection Etc okay so instead of using JavaScript we're going to create one solution that it's implemented just using attributes okay and I'm G to call this date but I'm going to tell you something and it's that I haven't run this Solution by my team so we might be doing some uh renamings of things before publishing the solution okay but I'm going to do it anyways for for the live stream so with this date formatting solution I want to do a few things I want to allow users to format any date in any way and I want to allow users to display any date using natural language so for example imagine that I want to show uh the current year like maybe at the end of the the the body at the footer I want to have one text block and this text block I want to always to be the current year so instead of having 2024 I want to have something that it's always showing the the current year okay so we would allow this also with this solution maybe we could do also displ a date using natural language I think that we can say here because it's going to be quite a lot of work here but essentially with this hopefully everyone understands it so let's imagine um that we just identify elements and then with some settings we can Define exactly how to display those stes we've got a countdown solution already Georgie I think let me check and know count items input counter number count oh no we've got a number count but we don't yeah but we don't have a countdown that would be probably a different solution um the is that always all the solutions and attributes are compatible so even though we might have one solution that just for date formatting maybe with another solution that it's for counting down we can you know format the date with one attribute and then do the countdowns with another attribute okay but that's completely out out of the scope of today's live stream because I don't have enough time great nice okay so I'm gonna start creating this and in the codebase this is the the code base I have it here in my vs code terminal uh in my vs code and essentially as I said this is a pmpm workspace so anybody who wants to start collaborating this let's assume that you're watching this on the future and open um attributes is already open source if you want to start collaborating here first of all you want to make sure that you have installed um pmpm so you want to do pmpm install D Global uh mpm install D global pmpm so you have pmpm on your machine and then once you have that you want to do a pmpm install here to make sure that you have everything you've got everything and then you want to do pmpm Dev okay and let's check what happens when you do pmpm Dev from all the packages we have one single entry package that is the attributes package okay and in these attributes packets essentially we're doing what I told you before and it's that we are initializing which checking for all the solutions and then we're dynamically importing those Solutions like this so we're doing Dynamic Imports I'll show you this in a second and then this it's being served in a script tag okay so I'm going to grab this script tag here oops I just messed up already I'm going to grab this script de and I'm going to make sure that I have it on my page so here date and I believe that I will have it like that okay and then there's one additional thing that we are going to do and it's that check this out this is the script tag okay and we've got a sync we've got type module we've got the source and look at this what is this exactly this is the other way of importing solutions that I told you about so the main script can work in two ways can work by just scanning the elements on the page or by scanning the script tag to find the solutions okay this one is the recommended way because this will work kind of as a um module preload which is a native thing of the browsers and essentially we're telling the we're hinting the attributes library to preload this solution we're saying hey we're going to use FS count items in this case but I'm going to change it to Fest state so please preload this because I want to use it I want to use this module okay if that makes sense so when we do this I'm going to publish although it's not going to work yet um with this we have everything ready to start building things okay so this is the attributes package and we've got a very handy template here which by the way I need to remove a couple things because this is no longer applicable this is no longer applicable I apologize this should be just this so I'm going to copy this template I'm going to paste it and then I'm going to rename this to date okay so now we've got a new solution called date that's it super simple and I'm going to start tweaking a bunch of things so first of all read me here I would probably say F has St attribute and here we're going to say something like uh you know date formatting for uh webflow elements whatever okay usually this this read me will contain things like you know the description it will contain things like the API because every every solution can have an API so people can programmatically work with it I'll show you now and and maybe some you know usage or examples anything that you want to share in the read me file this will be directly linked from the documentation so we can explain things here directly from the codebase okay so here uh and also I'm going to go to package SES and I'm I'm going to change this to attributes Das date like that okay and this is going to be version zero it's fine all good inex exhausts we've got attributes U all good great so I'm going to cancel this I'm going to clear and I'm going to install everything again so we've got the package available actually let me change also the attribute description like that nice great so every solution has two main things okay first of all it has an index.ts file and this essentially acts as the module entry point so from here we are exporting a bunch of things we're exporting the version from the packet so we know exactly what's the version of that solution in case that we want to debug and find out some something that going on we also export the init function and that init function is what will initialize the attribute okay and this is is why all the solutions are potentially uh consumable independently because each solution has a spe a dedicated init function and that init function can be also imported directly from the package if you want to okay and then also we export the constants that Define all the elements and settings there's for convenience in case that we want to work with them but I'll show you that in one second great so we've got constants we've got selector things and we've got an action here as an example nice so this init function it's just doing a console log equals to hello so the last thing that we need to do just is if we go here you can see how this example attribute is actually not existing because we don't have an example attribute we want to have a date attribute so I'm going to go to our global shared util package and in here if you go to constants attributes we Define all the keys from all the solutions okay this is so we can uh know exactly all the solutions that are available in attributes so we can work with them so in this case I'm going to do alphabetical in sorting and I'm going to do uh export con um date attribute and this just will be just date like that okay and I'm going to change this to date attribute great okay so um this now tell it's telling attributes that hey there's one solution that is called Date okay and this date it's a package that it's called date so we can dynamically import that now the the library knows it's smart enough to know exactly how to import this um so the moment that we have to find this in here in in wlow we've got a sync type module FS dat with this FS date the attributes Library will go and dynamically import the date packet that we just created okay and by the way just quick uh like time out one second everything that I'm explaining right now to set up one attribute it will be documented in the codeb base so don't worry like if you want to contribute you there will be contributing guidelines with all the uh information about creating solutions from scratch like I'm doing now okay so this now should work I think let me think no there's one missing thing let me close everything so I don't confuse you with a lot of things opened let's minimize everything let's go back to the attributes package and in the attributes package there's one missing bit and it's the dynamically loading the solutions okay so I want to dynamically load the date package when we find it out so in this case I'm gonna add one additional thing here it's GNA be here for example and I'm going to say when you find the date package I want you to dynamically import the date package so we need to include that in the attributes package I'm going to do here so you can see how all the all the solutions are dependencies of the attributes package okay so every single depend see it's defining the module it's defining the package of that solution and in our case we have created one that is called date so I'm going to duplicate this and call this date nice let's run a pmpm install again like that great and now they should work nice okay and look at this look how cool is this uh so the moment that we Define the date in the constants uh Ule then we've got all our comp completion everywhere so the whole code base it's fully type save so now all the solutions know that there is one solution that's called date and that we can work with it let me check the comments because I'm not paying attention to them I apologize almost gave up to we flow a few years ago due to limitations with functionality then I assemble across attributes attribut V2 plus up and Source Next Level thank you bullshark appreciate it so will this be accessible externally or will we we need to clone our own repo to add our own custom Solutions yeah good question Josh so there's two ways that I'm thinking uh it will work right now it's only compatible with solutions that are defined in the codebase but because we're going to open source this you'll be able to work directly in the codebase you'll be able to um just uh grab the codebase um check it out in um in your machine create a new branch and then create a pull request to the attributes package okay so to the well yeah to that the attributes Cod base so essentially um if you have something that you want add you probably can just open a PO request and then our team will review it and there's some things that they think we think that need to be changed we'll let you know but essentially we'll have that in there so you can see we've got a lot of pull requests open for a lot of solutions ongoing Solutions but that's a topic of another day so yeah Josh you'll be able to just directly commit well create pool requests for this code base and in the future I'm thinking that we might allow people to do something like uh external things like maybe uh like packages like I'm just going to make up one agency name but some something like a Josh Ellen and package name something like that so essentially will allow people to just create thirdparty um solutions that are not directly hosted in attributes but they are hosted elsewhere so essentially still with the same entry point you'll be able to dynamically import your own Solutions okay but that that's still not ready so I cannot show it to you but that's the the main idea okay great I love talking and still haven't coded in a bit so let's start coding great so we've got the the Imports already we've got everything so if this is going right on track if this is right on track we should be now running this lock hello function Okay so we've got a demo template function that just got a console lock hello here okay so let me open this let's check it out and it's not working we'll see why H probably because we need to run the library so here let me clear this we're going to do pmpm Dev like that and this will spin up the library nice and yeah correct so now we we can see this hello in here good the good thing is that we've got um automatic reloads in place so for example you want to change something and you want to say hello hello Josh I was speaking to you uh this should automatically reload and show me hello Josh which is good so you can be uh just updating the code and you can see all the changes right away okay so but we don't want to do console logs obviously so I'm going to get rid of this like that I'm going to get rid of this let's get rid of this no need for this okay great Okay so let's talk about this init function okay this init function does two things let's come here uh the init function first of all it will scan the page looking for elements and settings to initialize the the solution okay and it will return a uh it will return two things it will return the public API and it will return a destroy function okay so these two bits these first two bits are essentially just made to initialize the solution okay so initializing the solution it means that it will have to look for all the the elements that have some attributes applied and it will have to run whatever logic depending on the the attribute so it can work like that okay so it can initialize the that solution and then from the any function you can see how we are returning an object okay and this uh object expects two things expects a destroy method and a result method okay so this the result method it's essentially some public API because all the attribute Solutions we want it we want them to make we want to make them um developer friendly so we allow people to hook into the public API to work with them okay so there's going to be one public API optional it's not required some solutions don't really require public API but imagine for example filtering like probably you want to control filtering programmatically so we return a public API for that and also then we return a destroy function and that destroy function it's so we can um work per we can be performant when working with Solutions so anytime that you are for example navigating using Barb JS you probably want to destroy the existing Solutions so you clean up the memory or imagine that you are dynamically rendering elements with West um Co marketing bet of West and and then you want to when you render a new item you want to initialize that item but when you um destroy when you remove an an element you also want to remove the the all the memory that was located for that okay so that's why we return a destroy function that just makes it clean up cleans everything up okay so here let's start by something doing something very basic we want to localize dat elements and then we want to format the data elements like that okay so let's let's do this two-step thing so I can explain you how to find how to define elements in here in the code base and how to find settings in the code base okay let me check the questions here this is so helpful to me nice how is it plan to work with documentation of solutions added by open source collaborators well um solutions that are um committed to the code base we have essentially one a team that will be the ones who approve the solution and allow you to merge that solution and when they do that they will be the ones in charge of also including the documentation okay so the documentation will always be included in the read me file in here but at the same time we also have one webflow project with you know with fancy documentation that explains things way better than just you know a rem me file and in that case our team will manually update the documentation if it's something external then it will be like the developers uh job to just create a docum ortion page but I think that will I I'll have more clear guidelines about this in a future when we do the official launch okay Robin but thank you for asking good question great okay so first of all we want to localize the date elements okay so first what we need to do is Define what is a date element so let's go to the U folder here and let's open the constants okay in this constants file we've got two things we've got all the elements and we've got all the settings like that with um and now I think it's time to explain just in case that somebody does not know how attribute Works essentially in attributes we've got two concepts we've got the concept of elements and we've got the concept of settings like that okay elements are always always always always let's make this bigger elements and settings elements are always defined using a FS solution element equals to element name like that okay so in our case for example the solution is state so we would do something like a fast date element equals to an element date an element name and in our case because we're using dates I'm going to call this date like that okay but imagine that you know you've got multiple elements so for example filtering so you would do FS list this is a spoiler um you would do something like filters or you would do something like the list or maybe you would do something like items count like you can define a lot of elements and each element has its own purpose right in this case the element it's the date element that we want to grab so imagine that I have here my let me create a new section I'm going to duplicate this and I'm going to call this uh like that so imagine that I have here one element I'm going to say what's today today it's 2024 uh for 12 like that so imagine that I want to take this date here and and I want to format it right so I'm going to say f as state element equals to date like that we I'm defining an explicit data element so the attribute solution knows exactly what this what this is okay the other thing are the settings and the settings work by defining them like fat date setting equals setting key equals to setting value like that okay so in this particular this way we are defining you know many many different settings that we can have on a solution with different values too right and in this case I was planning to using uh this for formatting I'll explain this in a second but I can tell you that there's one option that we can use that it's called Uh year for example let's do this year so I'm going to have one setting that it says how do we format the years so this will be called FS State year and the value can be either uh numeric or it can be or uh to digit I think it was let me check numeric and to digit like that okay so this is how we Define settings so you can apply them on every element okay and the settings they have one one particular way of working and it's that they Cascade down so imagine that we have here let me create one page and we have here A bunch of elements so I'm going to call this element one and element two like this and this so this element will be FS State element equals to date so we've got one date here and also we've got another date here like that moving this up so you can apply settings either to an element so imagine that I have here this element and I want to add it the setting so I would do something like f f date year equals to numeric like that okay so now I have this particular element with the this date element that has its setting of uh year of numeric maybe the other element I want to have a different setting maybe I want to have something like a two digit on these other element going to make this bigger because I don't have space like that but settings Cascade down exactly like I'm just going to give you like uh something to remember just like when you create a style in wlow and you create it in desktop and that style Cascades down to mobile that same thing happens with settings in attributes so imagine that instead of adding this numeric setting to the elements imagine that I wrap them so I create a wrapper and on this wrapper I add the fs date year equals to numeric like this now I don't have to specify to this child because the child will say okay you don't have a numer a year setting but I see that there's one parent that has the numeric setting so this means that I'm going to use this numeric value here but because we can always overwrite values from the parents this particular element like hey yeah there's one parent that has numeric but I also have one more you know specific value that's applied to me so it's overriding and so these element will be two digit this element will be numeric because it's inheriting from the parent does that make sense I'm explain I'm going explaining this correctly this is actually um kind of you know core thing so I want to make sure that I'm explaining things George is asking can that be any parent or does it need to have FSD element in it as well no it can be any parent and the cool thing thing of this new setup is that it can be any parent or it can also be the script tag so this script tag here if I add it to the script tag so remember that we did something like FS date right on the script tag I can also add global settings like I could say FS date year equals to numeric so now this means that all The Elements by default so if I skip this if I remove this by default this element will have the um FS dat year equals to numeric because it's the outermost parent so the the the um the way of cascading down always goes from script to parent to element Okay so this way I see people excited about this nice Vincent if you're looking at this we know that we made the right decision nice so if I have my setting on the element that it's fine but if the element does not have a setting then it's going to check for any closest parent if there's any parent that has the setting then it's okay but if there's no parent that has the setting then it's going to check for the script T and if the script does not have the setting then there's no setting okay basically can easily copy paste Global initial settings between projects in one line yes that's right that's the that's the the the idea great okay so this is how it works and let's come here and Define the elements remember that we've got here in the code base elements and settings so I'm going to Define element in this case it's the date element so I'm going to call the this defines a date element pretty redundant and in the settings let's start by doing this year thing so I'm going to call year and how about we do uh actually let me grabb it from here the representation of the year and in this case this is year and we've got values either numeric or two digit so I'm going to do numeric whoops numeric or two digit like this okay and the reason why we Define it like this is because now we're going to have full type safety across the project let me show you here now um remember that here in U we've got two things we've got constants where we're defining all the elements and settings and also we've got selector okay and here's where the the the magic happens so here in selectors we've got a bunch of factory methods um built so we've got actually just this Factory method that is called generate selectors and this generates a bunch of helpers like that allows us to interact with specific oh with specifics um am I messing this up I am with specific settings so for example I can check if an element has a specific attribute or I can get a closest element of a specific attribute or I can get a specific selector or I can uh query all the elements of a specific attribute so let's start by using this so here I'm going to say uh dat elements and I'm going to do query all elements and by default here I'm going to get autoc completion okay that it's uh the main reason why we do these things because we want to make sure that we are type safe here I'm saying hey go in the page and find me all the elements that are date okay so we console log this date elements okay I should find hold on I need to publish this let's publish this is great so here you can see how we've got already one array of one element and this element is this element here nice okay zo inan like that so now we can start working on that okay and all it took for us is to define the element with the fs dat element equals to date but we've got this built-in function to query all these elements now for each of these elements I want to do um probably what I like to do it just create a factory so I can do something like an need date element sorry const okay and this date element will be an HTML element okay so here we can start doing things like let's just do something that doesn't make sense but I'm going to do in our HTML I'm going to say hey like that okay so if I come here and I grab all these data elements and I map and I say for it's data element I want to in the data element like that if we go back here now we are updating this element because obviously I'm just changing the the inner HTML but what I want to do here is I want to format the element based on the settings okay so let's start by getting the settings so what I'm going to do is here I'm going to grab the year um so I'm going to do a get attribute and this is again one of the build-in functions that we've got to to interact with all the attributes and I can say hey get me attribute from this data element and again check how we've got the auto completion for the settings so in this case we just have one setting that's here so let's scrap this actually no let let me create another one let me do a Locale because the the local I think it will be more it will be better so I'm going to say call this Locale the loc used to format okay and there's actually no values here because it will be arbitary so this in here not not only going to get the year I'm going to get the Locale like that so I'm going to do get attribute and I'm going to get these from the date element I want to get the Locale like that okay not locality but Lo Locale like that so what I want to do is I want to use the building um internalization datetime format method from the browsers to format this okay so I'm going to say uh well first of all actually to grab the date so one thing that we can try is to get the date on the element so in this case I would say date equals to new date and I want to use date element equals to in your text okay so uh in this case what I'm doing is I'm grabbing this text from the element and I'm creating a datea object using JavaScript so it's the same thing as I would just doing this here in the console oh it messed up like that okay so we're creating a DAT object so we can interact with it um it could be that there is a wrong value oh but that does not throw will it throw what if I try to we'll see I I'm going to check it later but okay for now let's keep it simple so now what I'm going to do is I'm going to create a datetime format and this Locale thing could be either string or it could be undefined okay so it's perfectly fine actually like that and I'm going to say format and I'm going to format the date so I'm going to call this formatted and once this is formatted which is the string now I'm just going to get the T U date element and I'm going to update this so if we did it right look at this so okay I'm I'm I'm gon to summarize because I know that I went fairly Qui quick now but what I'm doing now is I'm grabbing these value this value here and now this it's changing the formatting to match the Locale in this case because the Locale it's undefined then this is uh defaulting to my Locale in my browser which is uh SP Spanish so this is using the day uh actually no I have have the the browser on uh us so this is using the US loc so this is using month day year but imagine that I want to change that I want to make this uh let's make it French so we come here and would say FS date Locale remember that we' have to find the setting like this Locale okay and in here I want to pass any Locale so if we go back to here in the settings we can check that the locals that are available able are um a stram with a BC BCP 47 language tag BCP 47 language tag let's grab that and let's find so what what should we use give me one should we use Greek should we use Spanish so we use Irish Indonesian Kore what do you think give me one guys I'm going to wait you got 5 Seconds one two three four five n l okay Netherland I guess andl Netherlands a Dutch yeah Dutch H silone was the faster great so I'm going to use uh NL okay so now hopefully this will use the official formatting of the Netherlands which if it's in Europe I assume that it will be this okay so this is uh day month and year nice okay so now let's add more things remember that we can also get the year like that so in the year we had two options we can have it either uh two digit or numeric okay um one thing that we could do is in the get attribute function we've got an additional parameter that is called filter inv valued and in this case it's going to filter any value that it's not one of the values that we have to find here so if somebody enters something like blah blah blah I don't want that value to go in I just want to make sure that we allow this and now because I'm doing this now we this year it's only numeric or to digit so typescript also knows about this validation so we can pass this here in the options like that so this can be either numeric or two digit or undefined okay but remember that in here I don't have anything so we're skipping it but I'm going to say FS dat year it will be two digit okay and this twood digigit setting will hopefully format the date using two digits yeah correct and also when you define in the datetime format um API when you just Define when you define the settings like this then it's just going to show you that specific value so in this case we just defined year but let's go quick and let's do weekday too let's add the weekday so I'm going to come here to constants and I'm going to say year but I also want to allow to have uh week day and this week day can be long short or narrow so long or short or narrow like that so let's come back here to the project and now I'm going to say here I want to FS date weekday and I want this to be I don't know narrow I don't even know what this will do thank you J function is validate date return date instance ofd and N is Nan date okay great so let's check this okay so the weekday function probably doesn't work if you don't add more things so we probably want to add more things let's do the month and the day let's go I'm going to do super quick okay so I'm going to do weekday I'm going to do also the month so month stay with me numeric to digit long short and narrow long short and narrow so I just need to add also this so this is what can be in the month and the day can be either numeric or to digit so I'm going to copy this here month day day so numeric word to digit great so let's grab I don't know let's say month it's going to be numeric and day it will be two digit let's try it so coming here again I'm going to say FS date month we'll make it numeric and we're gonna say FS date day equals to two digit let's see what happened here now okay interesting oh I'm stupid sorry guys so the way the reason why it's not working it's because I need to pass those those options here so stay with me okay we're going to do do weekday I'm going to do the month and I'm going to do the day like that and we're going to pass all these uh options here okay look at that great so we've got let me try something different let me try so the month can be long and the weekday can also be long let's try it so if I come here and the month I make it long and the weekday I also make it long like that you guys are okay sticking with me great okay look at this so now look at this what's happening we're almost you know done with the goal which was to format a date using the Netherland Locale okay and now we also passed some options and these options are the Locale the year the weekday the month and the day and we're specifying the format of each one of those okay so in this case we're saying Hey I want to use uh from Netherlands let's change this to what was the next one Spanish so let's change this to Spanish I want to use some Spanish and I'm going to change it well with the year being displayed as two digit let's actually show the full year so I'm going to call numeric and the the month and the weekday will be long so essentially uses the word and then the date the the day will always use two digits like that so if we did it right if we did it did it did it right come on great yeah now we are formatting using Spanish what about that now imagine that for any reason I want to format using CMS now in that case you could maybe bring the Locale from the CMS right because remember that attributes now can be updated from the CMS now also let's imagine that I have multiple dates like this and I don't want to be specifying on each one of these the Locale so I'm going to get rid of the Locale of all of these getting rid of the Locale local and also no local here nice and maybe I'm going to add it to the parent so I'm going to do fs. local s for Spanish and that will also work okay because it's always remember the inheritance it will always come from the parent so in this this case this should also work or I could get rid of this so let's get rid of this setting here and I could come to my page here date and I could update this to have not only FS date but I also want to pass FSA loc equals Oops I messed up equals to yes so now all of the elements on the page here will be inheriting Spanish because it comes from the script tag nice great okay we're five minutes pass of time so I don't have time to talk about the rest I actually wanted to say to do more things but let me let me kind of give you a briefing of what we're going to do next day so I'm GNA get rid of this let's save again it's publ okay so next day what I want to do is I want to explain the full workflow of not only creating the solution but also so creating the solution so we're going to finaly the solution but also we're going to add tests to the solution so because all the solutions I I had didn't have time to talk about this but all the Solutions in the repository they have uh tests so we've got tests for accessibility accordion a media blah blah blah blah blah Okay so we've got tests for all all the solutions to make sure that all the updates are you know fully safe and people who are contributing to the code base will not mess up existing Solutions okay so um next day I'm going to talk about doing implementing all the tests I'm going to talk about um our workflow to uh submit submit a solution opening a pool request um getting feedback from the team or or giving feedback to somebody and then approving it and then merging it okay I'm going to talk about all of this in the next live stream Thomas is asking where can I find the schedule for Fu live videos like this G can you give me a hand here where can he find this probably you want to uh subscribe to our newsletter I I mean yeah everything related to fin plus you can find it in finet plus but for YouTube videos H well one thing that you can do is you can go to YouTube and you can go to the fuite channel and in the fu Channel there's always look there I'm live hey I think that you can subscribe and you can enable not even me actually I should I should be have everything um but you can subscribe and see exactly when there's live stream planned we have a calendar in the plus calendar but generally we have the definitive date a week before yeah so if you are part of finy plus now I'm doing some marketing for FY plus you can log in and here you can go and access the calendar and this calendar will give you always the all the events that are happening so for example um next Tuesday we've got a session building a Tesla inspired product configurator in wa part two on W edes we've got a f pleasantly meeting on Thursday we've got a whiz committee highlight with emanuals um probably doing something about whis next Friday we've got one session with me Etc so that calendar is actually pretty powerful Joe would be proud yeah okay great so um we're pass the time so I'm gonna start saying goodbye to everyone and but not before saying that I appreciate everyone's staying here I still see about 30 people here with me which means that we've got more than 30 people looking at me coding during one hour which I really appreciate So yeah thank you everyone for being here and I hope to see you next Friday have a nice weekend thank you guys [Music]

Channel: Finsweet

Views: 1,240

Keywords: finsweet, web app, cms bridge, webflow apps, attributes, products, free products

Id: 2SRbIVss7Y0

Length: 67min 45sec (4065 seconds)

Published: Sat Apr 13 2024