Big Announcement - Attributes replaces CMS Library

hello webflow community i'm joe krug ceo and founder of finsweet we have a big announcement for you and that announcement will be given in this video if you're a cms library user or a finnsuite fan you'll want to hear this message hate my face no problem this is available as a written blog piece in the description the topic of this video is our new attribute system attributes will be the home of all future free community tools from thin suite attributes is a series of solutions in webflow that would normally require code to accomplish and instead of writing code we use attributes our most popular existing solutions will be migrated to attributes anything we do from today forward will be developed and released as attributes the goals of this video are to number one understand why finn suite is growing out of cms library and transitioning to attributes understand how you benefit from this as a web flow user learn how attributes works with a live example and get you excited to use attributes on your next project cms library has been our most popular community solution today cms library helps thousands of developers and serves millions of pages monthly and we're no longer supporting cms library because we've created a 2.0 solution we have completely rebuilt our entire system every line of code is fresh every feature revisited for improvement and this update is so intense that we can't call it cms library 2.0 we've heard your feedback and you've motivated us to deliver you a superior solution and that solution is called attributes let's get into specifics about why attributes is so much better than cms library we have a long list of why cms library is great don't get me wrong it's helped many people build and deliver better webflow projects cms library may be the ideal solution for your project however we do understand that it's far from perfect you may have had a project or a use case that just can't be solved with cms library and we do not like that so let's look at the problems that we do have with cms library these are the reasons why cms library may not work for one of your projects first pretty bad ux when you're using load more and filter when your cms list is long filtering can also be very slow if there's a lot of items on the page ecommerce cart button can conflict with cms library sliders tabs not much flexibility some issues there and it's not fully modular or truly flexible for unique use cases so attributes has fixed 100 of these problems yes every problem i just said is now working by default in attributes our rebuild took all of these problems into consideration we don't want our tools to work for some projects and not work at all for others we want fin suite tools to be valuable and usable across all webflow projects now let's go through the list of optimizations of improvements that we've made in attributes first it's 100 modular only load the functionality that you actually need each solution is seamlessly intercompatible it's fully asynchronous with non-blocking runtime users are now able to start interacting with your website immediately while attributes runs its tasks in the background and this right here fixes so many of your problems with cms library it's accessibility focused everything is accessible by default in attributes and coming soon we have debug mode for automated support and also coming soon an extendable javascript api for developers this allows attributes to work as the base for any custom code based solution that's required in webflow we're getting more serious about the quality of product that we deliver to you we're dedicated to giving you the best technical solutions in webflow and our biggest upgrade is the improvement in cms data filtering attribute cms filter manages your filter data like no other solution in webflow most filter solutions will render all items on the page and then set display none to items that are not visible in the list cms library does this as well let's watch this example all items are on the page and as i filter all of the items remain there and their display changes they're set to display none and then they're set to not display none and display none is removed and that just keeps happening as we change the filter attributes features a more powerful solution that only renders items on the page if the item is needed render is a fancy term for displaying on the page so watch this example as the filter changes we're only going to render the items that need to be seen as the filter updates items are being added and removed from the dom no display none attributes manages your state of the collection list and adds reactivity to collection items it surgically renders and removes collection items only when required this works very similar to many javascript frameworks like react and we're bringing that power into attributes and web flow this is going to prevent unneeded layout computations it keeps the dom much smaller it's going to respect css properties like nth child for filtering and all of this is part of our mission to be the most performant solution for your webflow project and all of this is no code i know we just got a little technical with that explanation but i assure you attributes is for all users of all experience levels you will not have to write edit or copy paste any inline javascript to your website let's look at the steps that you would take to implement any attribute solution look at this first we copy the script file for the solution that we want to use and then we're going to paste it in the head of the page then we'll apply attributes to elements on the page to identify them some solutions may require one or a few attributes some solutions require many attributes we have documentation to help you throughout this process we have visuals we have screenshots we have screen records all in the docs attributes is a system we've built it as a system so all of our solutions can feel unified so all of our solutions can be approached with the same mindset and as you continue to implement attributes in your project the system will feel more familiar because every solution has the same process there are two types of attributes we have elements and options look at this structure functionality element element name functionality option option you want let's see an example here we apply element attributes when we want to define an element on the page for example adding a reset attribute to the button that should act as the reset filter button it defines what an element on the page is it's the reset button we apply option attributes when we want to define options within a functionality for example adding a show query attribute to cms filter it customizes an option for the filter functionality you can optionally show url query parameters based on filtered results this is an option these are the only two types of attributes in our system you're either tagging an element or you're giving an element an option that's it copy to clipboard custom slider dots cms filter mirror input everything everything follows it not only have we migrated our cms library solution to attributes we've rebuilt our sweet text solution we've migrated some fin suite hacks and we've created a whole new series of new useful functionalities in webflow all of this is in attributes look at what we've done with our sweet text solution instead of adding tags for classes like this we're going to write html directly in the rich text block we can add classes ids attributes anything we want html directly in line with the text gives us full control over our rich text blocks works in cms too and this is not the best part we're introducing components to the rich text block add entire components in line to rich text content components can be added from any page of your project same page different page the options here are endless custom call to action blocks advertisement bars tables calculators forms anything you want as long as it's in your webflow project it can be added anywhere inside the rich text block at the time of this launch we have 20 attributes solutions and this is just the beginning our list of attributes will continue to grow we will continue to build this system because it's scalable and it's modular previously finn suite has released different sub-brands different landing pages and different names for each new solution cms library sweet text calenvite hacks class adder and more although this was an excellent strategy for us at the time this is not a solution that fits with our company today the decision to create the sub brands the unique landing pages the cool video intros was made over three years ago and fin suite has evolved since then and our tools must evolve as well all free fin suite community tools will now be consolidated to attributes this is our official platform for existing solutions and new solutions and if you have an existing solution it's still going to be available and accessible if you have an existing solution implemented in a web project you have nothing to worry about everything will still work in your existing project the only difference is we're not going to be supporting or updating those existing solutions we're all in on attributes let's look at the roadmap here for attributes and see how we plan to grow it phase one beta done release 10 attribute solutions we got feedback we changed some documentation we got information about how people are implementing total success phase two that is delivered today that's cms library rebuild cms filter sort load more slider tabs combine nest and newly added cms select phase three that's in the near future early next year accessibility series attribute solutions specifically related to accessibility inside webflow and then we have phase four that's going to be after phase three is completed and that is community voted solutions we will start building attribute solutions based on what you tell us to build go to finnsuite.com vote to start putting in your recommendations and start voting throughout all of this we're going to explore better ways to integrate this into fin suite extension fin suite extension allows you to do powerful workflow functions inside designer and we want to bring that same workflow improvement to attributes today you can copy working examples of attribute solutions and paste them into webflow designer direct from the extension this can help lessen the learning curve and it's great for beginners or people who are advanced that want to save time with implementation so we're working on this we're going to make it better and better for you as we transition to our live working example let's look at the benefits that you receive as a user one attributes will make it easier to implement solutions that would normally require code this means less time to set up less of a learning curve more of a structured system and better docs attributes is more reliable in your webflow project we've rebuilt this entire system with our best at fin suite no hacked together solutions only developer approved reliable solutions number three much better performance for your published site our new system is more lean more fast more performant for your end users and number four a capable dedicated team to manage it super important fin suite is 100 focused on webflow and our attributes platform we're here to support it grow it and make it the best add-on to webflow attributes is free this is not something we're going to monetize in the near future our solutions are here to build a strong webflow community not to profit we're now going to shift to the live example portion of the announcement and see how fast we can create a load more instance on a webflow site we're here in webflow designer first know that this is not a step-by-step tutorial we have other videos for this that really go step by step how this is all set up this demo is to show you how quickly attributes can be put on your webflow build here we have a webflow cms collection list and note that pagination is enabled on this list we're going to first paste the attributes load more script file into the head of the page just like this we'll save and then we'll go back to the collection list and we'll add our first attribute there we go cms load element list nice we'll publish our page and there we go now we have load more functionality on the collection list look at that as we click this next button more and more items are going to load on the same page that's all we need excellent so this is working and you can see just with these two steps we created a pretty powerful functionality inside webflow now let's customize it for our project for our specific use case we're going to customize it with options here we're back on the collection list this is the element that we added the list attribute to and now let's go add an option fs cms load mode and pagination okay this will give us a paginated list so instead of loading items underneath it's going to have a next and a previous button and paginate on the same page okay and we're live there we go we have same page pagination functionality that's it this is how attributes works we apply attributes to elements on the page to identify them and then we apply options to those elements to customize functionality that's attributes we have a library of solutions ready for you to use and to explore for your next project some solutions are more simple than others some are more complex they require visuals and we have given you those visuals check out the documentation we have screen records screenshots it's all there attributes will allow you to say yes to more projects will allow you to work with more challenging projects with less effort more power more growth less code we're building strong in web flow and that's attributes go to thinsuite.com attributes to learn more about these solutions and how they can help you with your next project [Music]

Channel: Finsweet

Views: 4,317

Keywords: webflow

Id: DVmJDXgn26Y

Length: 17min 28sec (1048 seconds)

Published: Wed Nov 17 2021