React Advanced

React Advanced Conference 2022

Find out why the headless is the new buzzword everybody wants to use. I will take you on a fast ride through Storyblok, the first headless CMS with Visual ! You will learn why thousands of users love it and what benefits it brings you - the REACT community! by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Headless - The Future of CMS Is Here

Hello there and welcome to this lightning session about the headless world, content management systems, JAMstack and all that I coupled out there in the web. So my name is Samuel Snopko and I'm the head of the developer relations at Storyblock, which is one of the headless CMSs out there, of course, and also the proud sponsor of the React Advance. And I'm very happy that you find time to watch this video and invest this five, six minutes to find out more about the future of the content management system. So what is all the headless hype about? It's about building your own custom backend without needing to really code a lot. So you can build the atomic system as you want, set up different components on last app, but on the other side, you can use the framework of your choice. So if I would jump here to getting started, you could see you can go through all of that stuff. I don't have a bit of a slide. I just show you the website where you can find it. Then of course you will set up and you create the components according to atomic design and all your approaches that you would like to as similar as you do in your favorite framework. And then you can use that with the framework of your choice. So here, for example, in this samples, we have different samples for NexGIS, Next, Gatsby, React, of course, Remix, and all that stuff is already supported. So all the major React frameworks out there. And you can simply use the same setup at the backend with multiple frames in the future in the frontend and choose your favorite one. And that's all the headless about. Of course, additional to that, the nice backend give you like all the workflows, workflows, translations, approval system, versioning, and more stuff that you need for your content teams and for your marketers that they can easily work with all of that. Find out at storyblock.com. But what is exactly all about? So if you go and sign up and you will log in, you will get to the storyblock app where you will choose your favorite, where you can choose your favorite spaces. You can like put them, you can like manage them, but you can also easily create here a new demo like React Advanced. I created right now. And in this demo, then you can like play with all that stuff. So what is possible with this? So why and how and why should you do that? So I say you, you will get a visual editor with all the cool stuff of real time visual editing in React. So basically as soon as you will do the type, then you will see the change. So yes, this is all the parts. This is the blog library where you can define all the components. And then we have, of course, the content where you have a folder based system in which you will create different stuff.

Here we can see right now, of course, a sample project. And in the sample project, you have like different folders, you can like tag stuff, you have an asset library with image service, which you can like change this type of images. You can also like have an image editor where you can like Photoshop your images already directly in system. So you don't need to have extra tool. You have, of course, getting started here. You have a dashboard, which you see overview of all what's happening in your system, where you see all your last edits, the task pending to you and other stuff. Of course, you have a settings where you will set up different tokens, how to get content from draft for draft or for a public website. And you can have a multiple environments. You can have a multiple per your links if you are doing like a redesigning. All of that possible directly in Storyblock. But what is the visual content about?

So here, if I like enter my homepage, which is in this case, representing the index page and just like we named it the home, you will see that here I already see preview of my website and is not just random. This is my real website that is connected and is running in this case and one of the platforms like Versal, Netlify, AWS or your own server. And you can add here multiple URL links that you can switch between and you can like build the URLs. Here on the right hand side, you see the components that you define, not us. You will define what exactly means URL. So here in this case, if I go and click on URL, I see here that it's like I have here multiple tabs and there is like, of course, the fields like headline, subheadline, buttons, you can define, set the rules between them and all that stuff. You can also like extend and build your own custom plugins for it using the React or the Vue fully up to you. But what I was talking about that visual editing part.

So here you see that if I click and I go here and change the demo headline to React Advanced, then you will see that in the real time I see the preview. I'm sorry that my computer is getting a little bit slow because of the LBS. Right now you can do and do just more previews. You can scroll down, you can then click also on different parts of the website where for example, I see here that this is the banner and here it's directly opening the banner. By clicking three dots, I can move the components around and even I have the possibility of changing the styles. Like for example, here I can go and change the text color to dark and in seconds you will see that. All the settings here, that's not we are responsible, but you are able, you as developers have the power to configure all of this, set all these crazy setups and do the changes very quickly.
For example, here I did a little bit blur and you are also dark and then go and change the style to let's say light again and you will get this as a JSON. 

So here if I would like go to my publish content, I can see what kind of JSON draft or publish I will get from my API and then using the npm libraries, the bridges, how we call that JavaScript bridges, you will get them out of the content. 

So you will get a content in the structure JSON like this and according to that you build exactly the component in your final product. 

So how to do that and I don't have a time in seven minutes to do it. So that's why you should go to definitely the Storyblock technology hubs that we built and here we have a technology for the React where you already can find the tutorials for Next.js, React, Gatsby, also Remix, just go and search the website.

We even built suddenly, lately, the Next.js ultimate tutorial where we built already five steps article or first five part about how to build everything from scratch to international website, all of that using the Storyblock and your favorite framework, Next.js or the React and all of that, it's fully up to you. 

Just go to storyblock.com, find out more, follow us on the Twitter or follow one of our cool dev rels like Facundo Giuliani or others who are like specializing on the React and you will find even more. 

Thank you very much and see you soon somewhere in person. That's all for my side. Bye.

Samuel Snopko

Vue.js Live Conference

Vue.js London Live 2021

This will be fast &amp; furious! I will show you the fastest possible way to connect your Nuxt.js (Vue.js) project to the headless CMS and deploy it in seconds. You should know a thing or two about Nuxt.js, headless CMS in general or JAMstack as there will be no time to describe the concepts in detail. In the end, you will be furious how insanely good the JAMstack is! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fast & Furious - Going headless with Nuxt.js!

React Summit Remote Edition

React Summit Remote Edition 2021

You may read already about the Jamstack. You probably already used Next.js, and recently you may hear a lot about the headless CMSs. In this quick course, we will put all the pieces together, and I will show you why the Storyblok in combination with Next.js is the best combo for your next project. Stop and try it yourself! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Crash Course into the Jamstack with Next.js & Storyblok

Fabulous secret powers were revealed to me the day I discovered Jamstack and said "By the power of Headless, I have the power!" Find out the key features of any CMS and why the headless is the new buzzword, which everybody wants to use. I will take you on the journey through the land of headless CMS and show you why you should consider headless CMS for your next project. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

By the Power of Headless!

Hi everybody, I hope you are enjoying the conference so far. My name is Samuel Snopkom and I'm here to talk about the Headless, a fabulous secret powers who are revealed to me the day I discovered the Jamstack and the Headless. And this is basically the subtitle of this talk, where I will be talking about the Headless CMSs and if you have any questions in the future you can follow me on the Twitter and you can ask there anytime. So what are the Headless CMSs and what is the difference against the Monolithic CMSs? The short put it into three points, I would say like there is a decoupled, they are decoupled. So they are not telling you which frontend framework you should use and what backend API you should consume. They give you like freedom of choice and great freedom of your decisions and what you like. So also the way that you are not limited to the integrations that they are offering, but you can integrate your app, websites, anything you want to have from the third party solutions. Also as they are focusing on the content management system and the management, they can focus on the user experience. So they are building an application which using which you are building and collaborating on your content. And this application is on daily basis basically updated and make a new iteration which make it better and better without any time requirements from your side as developer. And additionally to that, they give you a very good developer experience as you can use any content management API or any API you want to have. And then you will work with the tools you like and want to work with. And also the valid point which should be the traditional CMSs are already moving this direction also. So they are showing that the Headless is a really a thing and I think it will be a very important part of the web ecosystem in the following at least 10 years. So that brings me to the evolution. So in my opinion, the Headless CMS is our next step in the evolution which is also kind of bringing us a little bit back, but it's bringing finally the right. We make the web right finally. So with the Jamstack and all that stuff, the Headless CMS is where the missing part that we wanted to have for the frameworks like NakedJS or the Nuxt.js. So at the beginning we had just the files, we put them on the server directly by the FTP protocol and then we created some kind of versioning system. So we put the content directly to the website or somehow version it. And then we have also like this powerful monolithic CMSs that were put on their own servers and then they have finally the features like the content out on the internet, even the preview modes and different stuff. But we at the end wanted at the end only those features. We didn't want to tell that those CMSs telling me how I should build my website. And this is what the Headless CMSs are doing. They give you all the freedom of those features.
They are needed for the content editors, but still they give you also the freedom to a developer to choose and build a website with what they need. So they are not, and the Storyblock is not as a Headless CMS, another great base solution. It's not only for developers. It's very, very in mind the user and the content editors, marketers, all those are the end users of the Storyblock at a point. So it's not choosing your technology stack. It's not locking you. If somebody is locking you, it's not the Headless CMS. And it not requires from you any updates. So you will have an update of your application and of the tool you are using for management of the content almost every week or day. So the Storyblocks as a Headless CMS give you the freedom to structure your project as you need. If you need a flat structure or you need a folder structure, you need different slides, you want to build it from the atomic design principle as a context to our principle, the structure, it's up to you. You will choose your technology or API. You can extend even the UI. So it's not restricting only to the features they are offering and we are offering.
And finally, you have a time to invest all the resources from the customers to the solution instead of building the ecosystem around the solution. You can really focus on the user experience of your website or application. So Storyblock, instead of that, take care even for more stuff like security, updating the UI to the latest trends, updating the performance of the database, which all you get basically for free without even noticing that because you don't need to change anything. There's like no structural changes and you just get faster system suddenly because the update was already delivered.
So if you are choosing new CMS, you should definitely choose some features and you should think about the future and what features you will need in your system. So for example, how you will translate it. So what kind of strategies you're for in translation? What kind of workflow can you set up? Do you have advanced rights? You can restrict some areas. Can you schedule a content to the future or a bundle of content together? Can you create a pipeline where there is a frozen content so you can do some editing and there is a pipeline or stage where the content is frozen and you're 100% sure that everything is correct? What is the editing experience? Is there a way to preview your draft content or do you have some context to a real time editing experience or how you can integrate, extend the stuff? And this list goes on and goes on and goes on.
So if you want to find out more about how to build something with the headless CMS and the React and Next.js together, go and visit my workshop next Monday where we will be building a website using the story block and you can find out how you can create something like a real time editing experience where you can click and change the stuff. You can copy paste and how this works dynamically without hitting the save button, how you can translate and build the website together. So how you can build your first website with the headless, with the Next.js and that will be covered in my workshop, which you can visit for free in the React Summit Remote the next Monday after this talk.
I see you there and I hope you enjoyed the lightning talk and I hope you will check out the headless CMSs and also the story block.

That's it. See ya. Good conference.