PrismicWhat if you had the best website in the world, but no one could see it?
This is where technical SEO comes in. By implementing best practices on your website, you can ensure that Google indexes it properly and doesn't penalize it.
Join Alex Trost, Lead Developer Experience Engineer at Prismic, in this comprehensive checklist that you can apply to all of your websites.
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript: youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder: youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
📍Chapters:
00:00 Intro - What is technical SEO? 01:38 Why is User Experience important for SEO? 02:09 Tip #1 - Core Web Vitals 03:21 Tip #2 - Optimize images 06:12 Tip #3 - Accessibility 07:41 Tip #4 - Mobile Responsiveness 08:36 Tip #5 - Reduce JavaScript 09:45 Tip #6 - Don't Require JavaScript 10:24 Tip #7 - URL Structure 11:25 Tip #8 - Unique Titles & Descriptions 12:02 Tip #9 - XML Sitemap 12:39 Tip #10 - Structured Data 13:47 Tip #11 - Canonical Tags 14:13 Tip #12 - Open Graph Metatags 15:48 Tip #13 - SSL/HTTPS 16:44 Tip #14 - Manage Redirects 17:22 Tip #15 - Create a useful 404 page 17:59 Tip #16 - Robots.txt 18:39 Tip #17 - Site Audits 21:07 Recap for Technical SEO
Technical SEO for Developers | 17 Tips to Rank Higher!Prismic2023-06-13 | What if you had the best website in the world, but no one could see it?
This is where technical SEO comes in. By implementing best practices on your website, you can ensure that Google indexes it properly and doesn't penalize it.
Join Alex Trost, Lead Developer Experience Engineer at Prismic, in this comprehensive checklist that you can apply to all of your websites.
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript: youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder: youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
📍Chapters:
00:00 Intro - What is technical SEO? 01:38 Why is User Experience important for SEO? 02:09 Tip #1 - Core Web Vitals 03:21 Tip #2 - Optimize images 06:12 Tip #3 - Accessibility 07:41 Tip #4 - Mobile Responsiveness 08:36 Tip #5 - Reduce JavaScript 09:45 Tip #6 - Don't Require JavaScript 10:24 Tip #7 - URL Structure 11:25 Tip #8 - Unique Titles & Descriptions 12:02 Tip #9 - XML Sitemap 12:39 Tip #10 - Structured Data 13:47 Tip #11 - Canonical Tags 14:13 Tip #12 - Open Graph Metatags 15:48 Tip #13 - SSL/HTTPS 16:44 Tip #14 - Manage Redirects 17:22 Tip #15 - Create a useful 404 page 17:59 Tip #16 - Robots.txt 18:39 Tip #17 - Site Audits 21:07 Recap for Technical SEO
--
#seoMigration Series: Converting HTML to Prismic Rich TextPrismic2024-10-16 | In this sixth video of our migration series, we'll focus with Lucie on Prismic Rich Text fields. We'll learn how to convert HTML to Rich Text with flexibility and how images and links should be handled during the conversion process.
📢 Considering a migration to Prismic? Reach out to us to learn more: prismic.io/enterprise
---
📍 Chapters: 00:00 Intro 00:00 Rich Text 101 00:00 Converting HTML to Rich Text 00:00 Migrating images during conversion 00:00 Migrating links during conversion
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupalMigrate from your existing CMS to Prismic in 4 stepsPrismic2024-10-16 | In this first video of our migration series, Lucie will present you what are the 4 recommended steps to follow to migrate successfully to Prismic.
📢 Considering a migration to Prismic? Reach out to us to learn more: prismic.io/enterprise
---
📍 Chapters: 00:00 Intro 00:00 Tools to migrate 00:00 Creating a Prismic repository 00:00 Initializing Slice Machine 00:00 Modeling content 00:00 Writing a migration script
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #migration #wordpress #drupalMigration Series: Creating DocumentsPrismic2024-10-16 | In this third video of our migration series, we'll focus with Lucie on document creation through our migration object. We'll see how to create migration documents of all sorts, including translated documents.
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupalMigration Series: Working With Content RelationshipsPrismic2024-10-16 | In this fifth video of our migration series, we'll learn with Lucie how to link one document to another with content relationships and how complex use cases can be handled with the help lazy content relationships.
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupalMigration Series: Writing a Migration ScriptPrismic2024-10-16 | In this second video of our migration series, you'll learn with Lucie how to set up your migration script, how to run it, as well as scaffold the necessary Prismic utilities we'll learn how to work with in the following videos.
📢 Considering a migration to Prismic? Reach out to us to learn more: prismic.io/enterprise
---
📍 Chapters: 00:00 Intro 00:00 Script setup 00:00 Prismic write client 00:00 Migration object 00:00 Dry run and next steps
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupalMigration Series: Complete Example Script OverviewPrismic2024-10-16 | In this seventh video of our migration series, Lucie will walk you through a complete example script leveraging everything we've learned since the beginning of the migration series. We'll also run this script and migrate some content to Prismic for us to review and publish together.
📢 Considering a migration to Prismic? Reach out to us to learn more: prismic.io/enterprise
---
📍 Chapters: 00:00 Intro 00:00 Script walkthrough 00:00 Running the migration script 00:00 Migration result, review, and publication
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupalMigration Series: Handling AssetsPrismic2024-10-16 | In this fourth video of our migration series, we'll learn with Lucie how to deal with assets with the migration object. We'll go over how to create assets of all sorts and how ot reference them in migration documents.
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupalCopy and Paste your Slices & New Migration Client! - Prismic ChroniclesPrismic2024-10-02 | In this month’s edition of the Prismic Chronicles, Guy takes us through some exciting new updates! We’ve got a ton of improvements, starting with updates to the Page Builder, including a new document list, enhanced search, copy-paste functionality for slices, and image field enhancements.
Plus, we’re super excited to announce a major update to our Migration API, which makes migrating your content to Prismic easier than ever!
📍 Chapters: 00:00 Intro 00:22 New Page list 01:02 Copy & Paste a slice & New search 06:07 Image field update 07:06 New demo on prismic.io/try 08:54 New Migration client
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder3 Next.js Full Stack Projects to Build a Stunning WebsitePrismic2024-09-27 | Follow the complete Next.js 14 courses, or clone them for your own websites 👇
🥤 Feel free to use these Next.js templates for any of your personal or commercial projects; they are all yours!
👇 Let us know in the comments below what you would like to see next. More GSAP? More Three.js? More flying soda cans?
----
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
---
#nextjs #gsap #prismicBuild a 3D Ecommerce website with Next.js and GSAP!Prismic2024-09-06 | Join the full course and start learning: youtu.be/RKQqrNyAC6k
#nextjs #prismicBuild a 3D Ecommerce Landing Page with Next.js 14, GSAP, Three.js and Prismic - Full Course 2024Prismic2024-09-04 | 🚀 Build a scroll animated 3D landing page with Next.js 14, GSAP, Prismic, Three.js, Tailwind, and TypeScript!
In this creative and fun course, we will make an e-commerce product landing page to sell a fictional soda brand called Fizzi. You'll learn how to bring 3D models into your projects, and how to fully animate them for scroll effects and so much more.
You’ll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder. You'll learn react-three-fiber to use Three.js within React. We’ll also use Tailwind CSS to style the super polished website, and Vercel to host it!
We’ll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I’ll walk you through everything you need to know.
At the end of this course you’ll have built and deployed a show stopping 3D experience that will impress job prospects or potential clients.
---
🔗 Course Resources: https://dub.sh/fizzi 🔗 Figma project: https://fig.page/fizzi 🔗 Final repository: github.com/a-trost/fizzi 🔗 Live Site: https://fizzi-demo.vercel.app/
---
📍 Chapters: 00:00 Welcome to the Fizzi Next.js course 01:38 Website tour 06:47 Setting up Next.js and Prismic 14:42 Slice Machine 101 - Building the Hero 01:05:16 Styling with Tailwind CSS 01:29:54 Getting Started with GSAP 01:37:25 GSAP Timeline 01:47:19 GSAP Scroll Trigger 01:58:54 Getting Started with Three.js 02:14:06 Build a floating 3D soda can 02:39:16 React Three Fiber 02:47:37 Animating the can 03:13:51 Adding bubbles 03:21:59 Zustand and syncing animations 03:31:01 Handling the mobile version 03:35:28 3D performance 03:36:58 Loading screen 03:44:21 Diving can 04:37:07 Carousel Slice 05:16:43 Alternating text HTML & CSS 05:25:21 Alternating text animation 05:48:12 Big text Slice 05:56:11 Footer 06:01:39 Fixing details 06:03:41 Deploy to GitHub and Vercel
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
---
#nextjs #gsap #prismicREADME driven development 🤯Prismic2024-08-19 | #svelte #prismicCreating your JavaScript framework? A full playbook with Rich Harris!Prismic2024-08-16 | Have you ever thought about creating a JavaScript framework? Rich Harris offers advice on how to scope your project and design your APIs.
🔗 Want to try Svelte 5 with Prismic, try this full tutorial, building your 3D portfolio with GSAP, SvelteKit and Prismic: youtu.be/JQAbenI2YTA
---
#javascriptAll you need to know about Prismics Page Builder - Prismic ChroniclePrismic2024-08-13 | For this summer edition of the Prismic Chronicle, we're walking you through a comprehensive demo on the Page Builder we've been working on over the past year.
Including all the latest improvements : - A shiny media library - Live Preview - Tags - Bulk edit / delete - Translate with AI
📍 Chapters 00:00 The Page Builder landing page 01:28 Building the Hero Section 03:05 Adding images / Media Library 05:48 Benefits section (Accordion) 08:10 Testimonial slice
--
#prismic #pagebuilderRunes with Svelte 5?Prismic2024-08-12 | #svelte #prismicKickstart websites in minutes with Nuxt UI and Prismic! Crash Course 2024Prismic2024-08-11 | 🚀 Build websites quickly with Nuxt UI, Tailwind, TypeScript, and Prismic!
In this lightning course, we will build a landing page and set up the building blocks allowing content writers to extend our website freely. We'll learn how to get started with Nuxt UI, a UI library made specifically for Nuxt, a leading Vue.js framework. We'll also make all of our website's content editable by using Nuxt UI components in Prismic slices.
Starting from the basics, this tutorial will set you on track to grow with Nuxt UI and Prismic. Step by step, we'll connect our website to Prismic, enabling great content edition and seamless previews when writing content.
By the end of this lightning course, you'll have the core knowledge of Nuxt UI and Prismic for you to build great websites upon.
#nuxt #prismicSvelte 5 Runes - How to talk to the compiler ft Rich HarrisPrismic2024-08-09 | Svelte 5 introduces a new concept called Runes that basically allow you to use magical symbols that influence the Svelte compiler.
We brought Rich Harris, the creator of Svelte, to the Prismic Studio to show us how you can use runes in your next Svelte project.
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
---
#svelte5 #runesMarkdown or CMS?Prismic2024-08-05 | #svetlte #markdown #prismicSvelte & Content - Whats Svelte’s creator take on your websites CMS? ft Rich HarrisPrismic2024-08-02 | How should you manage content in your Svelte application? Rich Harris explains Svelte’s philosophy on content management and offers advice for adding content to your web app.
#svelte #prismicLive building slices with Next.js, now with even more flexibility! | Prismic MeetupPrismic2024-08-01 | For this month’s Meetup, we’re bringing back one of our community’s favourite formats, a live coding session, to show you some of our latest releases in action.
Join Sadek, CEO of Prismic and Alex Trost and Lucie Haberer from the Developer Experience team, as we take an existing website and improve it live by adding a new, Linear-inspired slice to it.
#prismic #meetupGetting a job: React or Svelte? ft. Rich HarrisPrismic2024-07-29 | #svelte #reactReact VS Svelte - Which one should you choose in 2024? ft Rich HarrisPrismic2024-07-26 | You’re starting a new web project and you’re hesitating between Svelte and React? We've got you covered! We brought Rich Harris, the creator of Svelte, to the Prismic studio to give you a full evaluation of those options.
Spoiler: Rich knows more about React than you might imagine 🤯
—
🔗 Getting started with Sveltekit? Watch our latest full courses featuring Svelte / GSAP / Tailwind and Prismic:
#svelte #reactWe deploy once a quarter!Prismic2024-07-24 | #vercel #prismicShipping amazing experiences faster - ft. Guillermo Rauch, Next.js Creator & Vercel FounderPrismic2024-07-22 | We sat down with @VercelHQ CEO, Guillermo Rauch for an unfiltered discussion about the future of hosting, JavaScript frameworks like Next.js, AI, and much more!
Want to experience Next.js, Prismic, and Vercel in action? Join us for a masterclass with Alex Trost, where we'll be building:
📍 Chapters 00:00 Vercel fundraising in 2024 & Guillermo's vision 08:14 Delivering value with AI? 11:50 Dealing with competition 18:50 Tech Challenges while building Prismic & Vercel 26:10 Product-led growth 36:32 SaaS pricing and sales-driven companies 41:00 Before & After GenAI 58:30 The importance of brand voice and consistency 01:07:30 Shaping a simple vision of the future
---
#vercel #prismic #nextjsTranslate with AI and Next.js 15 / Svelte 5 support! - Prismic ChroniclesPrismic2024-07-05 | Are you looking to expand your websites to new markets? Then you will love our new beta feature in the Page Builder, allowing you to quickly get a translated version of your content, all powered by AI!
Additionnaly, we’ve released full support of Next.js 15 RC and Svelte 5 RC in Slice Machine, try it out!
📍00:00 Intro 📍00:21 Media Library Recap (Tags) 📍03:10 Translate with AI beta (Demo) 📍05:48 Next.js 15 & Svelte 5
---
#prismic #aiBuild a Creative Portfolio with SvelteKit, GSAP and Prismic!Prismic2024-07-04 | 🔴 Full Course: youtu.be/JQAbenI2YTA
📄 Course guide on Notion: https://prismic.notion.site/Course-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386
#sveltekit #gsap #prismicMake more out of your Websites! | Prismic MeetupPrismic2024-06-27 | Join us live for a live demo, a product roundup, and a live Q&A with the community 👇
Translate with AI
⇒ Get started fast in a new locale, live demo!
Lightning round of Q2
⇒ Organize and filter your media better with media library!
⇒ Slice Machine's new modeling capabilities.
Grow with an agency partner
Special guest: Sylvain Lourgouilloux, managing director at lab.co.uk, Prismic partner agency.
Discover how agencies can leverage Slice Machine to reuse components and speed-up their development time by 40%!
__________
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full SvelteKit website with Tailwind, GSAP and Prismic
youtu.be/v5Ncz5AcXjI
► [Who are we?] : Prismic is a headless Page Builder, for Next.js, Nuxt and SvelteKit developers.
---
#prismic #meetupCreate a Creative Portfolio with SvelteKit, Three.js, GSAP and Prismic! Full Course 2024Prismic2024-06-24 | 🚀 Build your stunning creative portfolio website with SvelteKit, Prismic, Three.js, GSAP, Tailwind, and TypeScript!
In this fun course, we'll make an interactive and stylish personal portfolio website to help you stand out. You'll learn SvelteKit, a JavaScript framework that makes performant sites and is a joy to work with. We'll use Three.js to create awesome 3D effects, and use a library called Threlte to make Three easy to use within Svelte. We'll dig into GSAP to animate our site on enter, scroll, and hover, and use Tailwind CSS for all the styling. We'll use Prismic for our content, which turns our custom components into a page builder with a ton of great features like live previews.
Starting from the basics, this tutorial will show you how to create a website with Svelte and TypeScript. Then, step by step, we'll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.
By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!
🔗 Course Resources: https://prismic.notion.site/Course-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386 🔗 Final repository: github.com/a-trost/3d-sveltekit-tutorial 🔗 Live Site: https://3d-sveltekit-tutorial.vercel.app/
---
Chapters 📍 00:00 Intro 00:49 Full Website Tour 08:53 Setup your project (SvelteKit & Prismic) 20:22 Building the Hero Section (Slice Machine & GSAP) 02:06:26 Create background styles 02:13:36 Settings and Footer 02:54:23 Create the Header 03:33:31 Biography section 04:18:41 Animated Tech List section 04:43:42 Experience section 04:56:46 Blog section 05:59:46 Professional projects category 06:52:15 Deploy on Vercel 07:03:30 Polishing the live website
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#sveltekit #prismic #gsapAdvanced Slice Modeling & Team Spaces - Prismic ChroniclesPrismic2024-06-06 | We're happy to announce that we've just released Slice Machine 2.0.0 to natively support slices with sophisticated designs such as tabs, cards, multiple buttons, and image galleries.
On the Page Builder side, a new powerful feature is coming soon: Team Spaces. It will allow you to define spaces for your team, allowing you, for instance, to permit Legal team members to only edit Legal pages.
Chapters: 📍 00:00 Page Builder Recap 📍 01:36 New Team Spaces 📍 02:57 Slice Machine 2.0.0 Release
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#prismicPrismic 🧡 Svelte: Meetup with Rich Harris, creator of Svelte! | Prismic MeetupPrismic2024-05-30 | Svelte behind the scenes with its creator: Rich Harris
Did you know that every month, more than 150 new projects are started with Prismic and SvelteKit?
Want to learn more about both technologies?
Join us to learn firsthand from my discussion with Rich Harris about the future of the web.
We’ll dive into how using frameworks like Svelte can avoid over-complexity and improve developer experience.
📍 Chapters: 00:00 Intro 05:22 Welcome to the Meetup 06:29 Rich Harris & Svelte: How to build opensource 16:10 Why we chose to integrate Svelte with Prismic 22:20 What's new with Svelte 5 & Runes? 33:05 Getting Started with Prismic & Svelte 41:33 Live Q&A with Rich Harris 46:49 Prismic Updates - Slice Machine 2.0 and Page Builder
__________
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full SvelteKit website with Tailwind, GSAP and Prismic
youtu.be/v5Ncz5AcXjI
► [Who are we?] : Prismic is a headless Page Builder, for Next.js, Nuxt and SvelteKit developers.
---
#sveltejs #sveltekitBuild a full Website with Sveltekit, GSAP and Prismic!Prismic2024-05-07 | #sveltekit #gsap #prismicAn AI Copywriting Assistant in the Prismic Page Builder? | Prismic MeetupPrismic2024-04-25 | We're considering adding an AI copywriting assistant to our Page Builder.
Interested? Join our 30-minute Meetup this Wednesday to discuss this integration. It’s your chance to influence our decision-making process by sharing your thoughts directly with Prismic’s decision-makers: Guy, the Page Builder Product Manager, and Sadek, our CEO. Our guest, Abdul Shucker from Fineart (a Canadian agency using AI to speed up website delivery), will also share insights.
__________
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
► [Who are we?] : Prismic is a headless Page Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscms #jasperaiNew revision history & media library search. What about an AI copywriter? - Prismic ChroniclesPrismic2024-04-23 | This month, you will discover : 📍 00:00 Intro 📍 00:11 AI copywriting copilot in the Page Builder? 📍 05:07 Time-saving media library search 📍 06:38 New revision history 📍 07:47 HTML to Prismic Migration
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---Build an Animated Website with SvelteKit, GSAP & Prismic - Full Course 2024Prismic2024-04-12 | 🚀 Build a dark, modern, animated website with SvelteKit, GSAP, Prismic, Tailwind, and TypeScript!
In this in depth course we make a trendy, dark and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more!
You'll learn how to use SvelteKit, the ultra fast Svelte metaframework. Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super-polished website.
We'll get bootstrapped with a minimal starter to set up SvelteKit and Prismic for us, and I'll walk you through everything you need to know.
At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients,
🔗 Docs and Resources - https://prismic.notion.site/Course-Resources-Dark-Modern-Website-f1963068872c47ccad97820240e5b7e7 🔗 Live Demo - https://repeat-ai.vercel.app/ 🔗 GitHub repo - github.com/a-trost/repeat-ai
- - -
📍 Chapters: 00:00:00 - SvelteKit Full Course Intro 00:01:41 - Project Overview with SvelteKit & Prismic 00:09:45 - Notion Doc / Help and troubleshooting 00:11:26 - Getting Started with Prismic 00:14:25 - Getting started with VSCode 00:18:42 - Homepage 00:29:56 - Adding Tailwind CSS 00:34:59 - Installing local font 00:41:45 - Setting up footer 01:07:03 - Tailwind CSS VSCode extension 01:07:41 - Creating the Header 01:54:00 - Styling the bento box 02:20:40 - Showcase Section 03:03:17 - Case Studies Slice 04:00:47 - Integrations Slice 04:29:50 - Call to action Slice 04:37:00 - Assembling in the Page Builder 04:57:40 - Deploying on Vercel 05:10:45 - Animate the Hero with GSAP 05:54:26 - Animate the Integrations section 06:16:57 - Accessibility and Final Touch
---
#sveltekit #gsap #svelte #sveltekit #prismicEfficient search in media library. Smart copy paste from Notion/Google Docs - Prismic ChroniclesPrismic2024-03-29 | This month, you will discover : 📍 00:00 Intro 📍 00:16 Page Builder & Media Library Updates 📍 03:10 Slice Machine Responsive UI 📍 04:06 Migration API Bulk Updates 📍 06:36 Smart Copy Paste with AI (from Notion or Google Docs)
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---A new Media Library, AI Features in the Page Builder and 13 more features | Prismic MeetupPrismic2024-03-28 | In the past three months at Prismic we released a new Media Library, a set of AI-based feature to supports marketers in creating content (Iterate with AI, Prompt to Slice) and thirteen improvements and bug fixes in Slice-Machine, including auto-save.
Join us on Wednesday for our end-of-quarter roundtable as we go through these releases and give you a sneak-peak into the features landing in the coming three months: new documents search, smart copy paste from Notion or Google Docs to the Page Builder & team spaces in the Page Builder.
📍 Chapters: 00:00 Welcome to the Meetup 14:35 Migration API Updates 26:55 Platform & API 34:38 Page Builder & Media Library 57:40 AI Features: Smart Copy Paste 01:04:53 Slice Machine Updates & Priorities 01:15:17 Live Q&A
__________
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
► [Who are we?] : Prismic is a headless Page Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscms #nextjsBuild a Dark Modern Animated Website with Next.js 14, GSAP, Prismic!Prismic2024-03-20 | Start building with Prismic and Next.js for free: prismic.io/nextjsBuild a Dark Modern Animated Website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScriptPrismic2024-03-15 | 🚀 Build a sleek and gorgeous animated website with Next.js 14, GSAP, Prismic, Tailwind, and TypeScript!
In this fun course, we will make a trendy, dark, and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more!
You'll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super polished website.
We'll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I'll walk you through everything you need to know.
At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients,
🔗 Docs and Resources - https://prismic.notion.site/Prismic-Next-js-Course-Resources-9eda931a8b3743b9b3aaf0b7a561403b?pvs=74 🔗 Live Demo - https://glisten-ai.vercel.app/ 🔗 GitHub repo - github.com/a-trost/glisten-ai
- - -
📍 Chapters: 00:00:00 - Intro - Marketing Website with Nextjs 14 00:01:50 - Project Rundown 00:08:21 - Create Next.js site with Prismic 00:19:46 - Install Tailwind CSS 00:25:20 - Add Font 00:36:33 - VSCode Extensions for Next.js 00:29:28 - Create Settings custom type 00:37:08 - Creating Header and footer 01:08:59 - Building the Hero Slice 01:34:46 - Bento Box Slice 02:02:59 - Showcase Slice 02:33:21 - Case Studies Slice 03:42:30 - Call to Action Slice 04:04:44 - Deploy to Vercel 04:09:42 - Revalidation 04:13:24 - Add live preview URL (visual editing) 04:17:22 - Hero Section Animation with GSAP 05:09:51 - Integration Slice Animation 05:23:02 - SEO Check and Polishing
- - -
#nextjs #tailwindcss #gsapIterate on your Slices with AI & new Media Library features! | Prismic ChroniclesPrismic2024-02-29 | For this February Prismic Chronicle, you'll discover : 📍 00:00 Introduction 📍 00:21 Iterate on Slices with AI 📍 03:02 Media Library: New Search 📍 04:20 Media Library: Bulk Delete 📍 04:57 Media Library: New Tags 📍 06:30 Slice Machine: Auto-save 📍 07:27 Thank you!
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#prismic #ai #medialibraryNew Media Library - Find & Organize Assets Intuitively | Prismic MeetupPrismic2024-02-29 | Discover Prismic's revamped Media Library in February 2024—now with better organization, tagging, filtering, and more. This upgrade will help you release pages faster, making assets easily accessible.
Join our interactive Prismic Meetup to explore these new features with the Product team. We’ll cover the benefits, offer a live demo, and discuss future updates. Your feedback and questions are welcome, shaping Prismic's ongoing improvements.
📍 00:00 Welcome to the Meetup! 📍 03:44 Would you teach AI to your kids? 📍 14:26 Ben Jackson from Paddle 📍 30:42 What's new in Media Library? 📍 45:00 Live Q&A 📍 58:10 Product Roadmap 📍 01:06:52 See you next month!
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscms #nextjsHow to Maintain an Open Source Framework | Inside Nuxt with Daniel RoePrismic2024-02-21 | How can open source truly stay open? What does it take to push an open-source framework forward? We spoke with @danielroe the Head of the Nuxt Core team to get his opinion on all this and more. Daniel shared insights into his professional journey, offering advice to aspiring professionals, and sheds light on future trends and his vision for the industry.
Chapters: 📍 00:00 Intro 📍 02:48 Start at Durham association 📍 08:47 Working remotely 📍 12:36 Becoming Nuxt Lead 📍 15:35 Daniel's discovery of open-source 📍 19:05 Nuxt 3 and Nuxt Bridge 📍 23:15 Future of Nuxt in the community 📍 27:40 GitHub contibutions and quality 📍 35:50 Workload as an open-source contributor 📍 41:36 Nuxt 4? 📍 46:50 How do work magic into your planning? 📍 48:35 AI and Large Language Models 📍 57:44 Being a lazy developer 📍 01:02:20 Nuxt module with Prismic 📍 01:03:52 The Vue.js ecosystem
---
#nuxtjs #nuxt3How to make a great framework better? - Svelte 5 with Rich HarrisPrismic2024-02-01 | We sat down for an interview with Rich Harris, the creator of Svelte and SvelteKit. In this video, Rich dives deep into the philosophy, features, and future of Svelte. Harris explains how Svelte simplifies web development, making it more accessible and improving app performance by compiling code at build time. He discusses the evolution of Svelte from its early days in newsrooms to the introduction of SvelteKit for full-stack development.
We touch on what's new in SvelteKit 2, and what's coming with Svelte 5 and Runes. I ask him about every framework adopting signals, and he explains why they're such a great concept.
Rich explains his thoughts on us overcomplicating web development, how some things should just be built in to the framework, and how we can make the web a better, more sustainable place.
📌 00:00:00 Intro 📌 00:00:49 What problem does Svelte solve? 📌 00:07:49 Writing the first line of Svelte 📌 00:12:34 Creating tech for on-the-ground problems 📌 00:14:58 Still newsroom DNA in Svelte? 📌 00:20:09 What's so great about Signals? 📌 00:26:20 What are Runes? 📌 00:33:28 Svelte VS React VS Vue 📌 00:37:10 Maintaining SvelteKit 📌 00:40:10 Svelte 5 Improvements 📌 00:47:54 SvelteKit 2 - Same but different? 📌 00:53:30 Goals for SvelteKit & Svelte 📌 00:59:38 Rollup 📌 01:01:58 Joining Vercel 📌 01:06:59 Why are the docs so good? 📌 01:16:13 Creation of the Svelte name and logo
---New Page Builder and Migration API | Prismic MeetupPrismic2024-02-01 | In January 2024, we launched two new features designed to accelerate your workflow. This month, we are introducing two major additions, now accessible to all existing and new users of Prismic repositories: the Visual Page Builder and the Migration API.
Join us this Wednesday at the Prismic Meetup for a fireside chat with the Product team. You'll hear the backstory behind the development of these features and the team's future plans for the APIs and Page Builder. We also want to hear from you: let us know your priorities for future developments and how they could benefit you and your team.
---
📍 Chapters: 00:00 Welcome to the Meetup 04:40 Antoine Ughetto from Makemepulse - Partner Agency 34:17 Migration API Live Demo 51:39 Page Buidler Updates 01:15:13 Prismic AI Features 01:20:27 Live Q&A
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscms #nextjsA new Media Library for Prismic Page Builder! - Prismic ChroniclesPrismic2024-01-30 | For this first 2024 Prismic Chronicle, you will discover:
1️⃣ How to schedule a release on the Page Builder. 2️⃣ A completely revamped Media Library, available now! 3️⃣ Updates on the Migration API. 4️⃣ How to change your master locale in a Prismic repository.
🔗 Want to get access to the Migration API to migrate your existing content over to Prismic, get access to the beta: prismic.io/migrate
🔗 If you want to enable the new Page Builder with the new Media Library on an existing repository, just ping us here: prismic.io/pb
📍 Chapters: 00:00 Intro 00:30 Page Builder: Schedule a release 04:00 Page Builder: New media library 06:08 Migration API updates 08:39 Change your master locale 09:17 Outro
See you next month!
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#prismic #pagebuilderCreate a Stunning 3D Animated Portfolio Website with Next.js 14, Three.js, GSAP, and PrismicPrismic2023-12-28 | 🚀 Build your stunning portfolio site with Next.js, Three.js, GSAP, Tailwind, and TypeScript!
In this fun course, we will make a stylish and interactive personal portfolio site that really stands out. You'll learn to use Next.js, a leading React framework, and Three.js (React Three Fiber) to add awesome 3D effects. We'll also dive into GSAP for smooth, fancy animations and use Tailwind CSS to make everything look neat and professional.
Starting from the basics, this tutorial will show you how to create a website with Next.js and TypeScript. Then, step by step, we'll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.
By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
--
📍 Chapters 00:00 Intro 04:16 Getting Started - Project setup 27:29 Creating the Hero 32:12 Hero letters animation 01:00:00 Helper Component 01:06:29 Setting up Three.js Scene 01:40:01 Adding sound effects 01:45:08 Nav Bar 02:03:03 About Page 02:40:27 Tech List (Marquee Title) 03:03:05 Hover and Scroll Animations 04:47:15 Job Experience Slice 04:51:37 Deployment on VercelWrapping up 2023 - A year full of releases for Page Builder & Slice Machine! - Prismic ChroniclesPrismic2023-12-21 | 🎄 This year was full of releases, and we wanted to wrap it up for you!
The Page Builder is now the default way of editing your pages on all new repositories! We'll show you an overview of the editing experience along with tips to schedule your releases and how to manage your legacy slices (if you're not using Slice Machine yet!) 🎁 Haven't tried the Page Builder yet: Try editing a page here. No signup required! prismic.io/try
Slice Machine also had a lot of improvements this year with the added support of Sveltekit and the addition of new features like deleting and renaming your variations. We'll also give you a sneak peek of the features that will be shipped in 2024, like collaboration with the Github integration and team spaces.
Finally, we'll show you how to migrate your content from another platform over to Prismic with a new limit, increased from 200 to 1000 documents.
Chapters: 📍 00:00 Intro 📍 01:05 The new drag-and-drop Page Builder 📍 05:48 Slice Machine supports Sveltekit, plus deleting and renaming slice variations 📍 09:33 The new migration API supports large and multi-language websites 📍 13:58 A sneak peek into 2024: Team Spaces, new Media Library and Search
---
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---Visual Page Builder, New Search, Revamped Media Library... Come influence the trajectory of PrismicPrismic2023-12-14 | Join us for our end-of-year roundtable, where we'll show our latest product releases, discuss features landing in the next three months (new Media Library, Search, Developer Sandbox) and dive into our pricing adjustments.
This is your opportunity to sit at the table with us, share your thoughts, and help shape the future of Prismic. We look forward to this important dialogue with you.
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscmsThe best NEW way to render Next.js pagesPrismic2023-12-03 | Full Next.js Course available here: youtu.be/nfZu56KsK_Q
#nextjsShould you use Server Actions with Next.js?Prismic2023-12-01 | Full Next.js Course available here: youtu.be/nfZu56KsK_Q
#nextjsMigrate From Pages to App Router in Next.js 14 - Full Guide ft @hamedbahramPrismic2023-11-30 | 🔥 Today, we've brought Hamed Bahram, successful software engineer and content creator to explain how to safely move from Pages to App Router in a Next.js 13 or 14 project.
📍This full guide will cover the following chapters:
0:00 Intro 1:48 Project current setup 11:30 Migrating to the App router 13:50 Updating dependencies 15:40 File conventions in App router 19:20 Creating the App folder & root layout 23:40 Migrating pages 27:25 Routing hooks 28:30 Migrating data fetching 30:30 Prismic migration guide 33:20 Migrating the Home page 41:25 Migrating dynamic UID page 44:10 Migrating API endpoints 48:00 Recap
As a developer, you should build websites using your favorite Jamstack framework. Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine