9/7/2023 0 Comments Rapidsvn urls![]() ![]() ![]() Tools & Services Slice Machine: a workflow for developing and deploying website sectionsĪt Prismic, we've been experimenting a lot with building websites with components. Our Slices feature, which encourages our users to visualize sections of their pages as components, has been one of our most popular features. That popularity made us think about how we could take the feature to the next level and develop a tool to improve component workflow and management-and that’s where Slice Machine was born. We know that even technical terms can sometimes be interchangeable and unclear, so when we refer to components for this project we are thinking about page sections (macro components) like carousels, FAQ sections, hero sections, CTA, etc. So this isn’t the standard component library that you may have seen in the past, it truly is a tool that will allow you to improve your component workflow, from building the individual components, to combining them into actual pages. The project currently runs on Prismic, Nuxt, and Netlify, and ships with a default library of customizable components. To offer you real value right out of the box (as if you needed more) we’ve teamed up with Sara Soueidan to bring you a high-quality default library that focuses on accessibility and responsiveness. Much like Prismic, we want Slice Machine to be suitable for just about any stack, and we’ve already started working on supporting other React and Vue frameworks (including Gatsby and Next). There’s every chance that you’ve made it this far without knowing what Prismic is. Prismic is a Headless CMS that offers unlimited custom types, API calls, and a bunch of other great things. The problem is, API-based CMS’s have created a gap between the components and the data that they require and we wanted to bridge that gap. We took our first step on that journey when we created our Slices feature. With Slices you can break your page content into JSON components that correspond to your frontend components. Each Slice represents the JSON model (content) for a given component. ![]() Slices also give non-technical people a visual interface that allows them to easily build and fill content and create pages simply by combining sections. ![]() Slices are one of our coolest features and a big reason why so many people are choosing to use Prismic.īut we wanted to find a way to take Slices to the next level and to allow developers to adopt a totally component-based approach to how they build websites and create pages. Slice Machine - Build website sections and combine them into pages And that’s why we’ve partnered with Netlify and Nuxt to bring Slice Machine to life. In its most basic form, Slice Machine is an open-source CLI and a component library. building and deploying page sections (components)īut let’s start by focusing on the second part: combining components into pages.There are two parts in building webpages with components. That’s where the cool stuff really begins. Either way, the question is the same: how can you combine these components to build actual pages? So imagine that you've already built your set of sections, or maybe you're using our default library. Of course, you could hard-code it and simply call the necessary components into your page. You will have to duplicate a lot of code, rebuild your website, and deploy it each time you need to edit or re- arrange these sections. SliceZone is a component that you drop into your page and it will take care of calling the necessary components and provide them with their content props to build the page. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |